专栏首页非著名程序员基础篇章:关于 React Native 之 Modal 组件的讲解

基础篇章:关于 React Native 之 Modal 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)

Modal是模态视图,它的作用是可以用来覆盖 React Native中根视图的原生视图,Modal模态视图是一种覆盖包围当前内容视图的一个简单方法。

注意:如果你需要如何在您的应用程序的其余部分呈现模态的更多控制,那么可以考虑使用顶级导航(top-level Navigator)。

照例,我想大家都知道我的习惯了,毕竟官网也是这个顺序,那就是在用人之前,先要了解人,毕竟疑人不用,用人不疑嘛,要想相信一个人,首先得了解一个人嘛。来,看看 Modal 的相关属性。

  • animated bool 是否有动画效果,不过这个属性已经被抛弃了,取之代替的是:animationType
  • animationType (['none', 'slide', 'fade']) 这个animationType属性作用就是如何控制模态动画,有一下三个类型:
    • none 出现的时候不带动画效果
    • fade 带有淡入动画的效果
    • slide 从底部滑动出来的动画效果
  • onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func 这是一个 Android 平台需要的属性,它的作用是当这个模态视图取消或者关闭消失的时候回调这个函数
  • onShow function 当模态视图显示的时候调用此函数
  • transparent bool 布尔值,是否透明,true 将使得在一个透明背景的模式
  • visible bool 布尔值,是否可见
  • onOrientationChange func ios 当在显示模态的方向变化时回调此函数
  • supportedOrientations ios (['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']))

实例演示

来,我们大家一起看看这个效果的实现,看完效果就更加直观的能够感受到这个组件的作用和功能了。动态效果图如下:

实例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Modal,
  Picker,
  Switch,
  TouchableHighlight,
  Text,
  View
} from 'react-native';

class Button extends Component {
  state = {
    active: false,
  };

  _onHighlight = () => {
    this.setState({active: true});
  };

  _onUnhighlight = () => {
    this.setState({active: false});
  };

  render() {
    var colorStyle = {
      color: this.state.active ? '#fff' : '#000',
    };
    return (
      <TouchableHighlight
        onHideUnderlay={this._onUnhighlight}
        onPress={this.props.onPress}
        onShowUnderlay={this._onHighlight}
        style={[styles.button, this.props.style]}
        underlayColor="#a9d9d4">
          <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
      </TouchableHighlight>
    );
  }
}

export default class ModalDemo extends Component {
  state = {
    animationType: 'none',
    modalVisible: false,
    transparent: false,
  };

  _setModalVisible = (visible) => {
    this.setState({modalVisible: visible});
  };

  _setAnimationType = (type) => {
    this.setState({animationType: type});
  };

  _toggleTransparent = () => {
    this.setState({transparent: !this.state.transparent});
  };
  render() {
     var modalBackgroundStyle = {
      backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
    };
    var innerContainerTransparentStyle = this.state.transparent
      ? {backgroundColor: '#fff', padding: 20}
      : null;
    var activeButtonStyle = {
      backgroundColor: '#ddd'
    };
    return (
       <View>
        <Modal
          animationType={this.state.animationType}
          transparent={this.state.transparent}
          visible={this.state.modalVisible}
          onRequestClose={() => this._setModalVisible(false)}
          >
          <View style={[styles.container, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
              <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
              <Button
                onPress={this._setModalVisible.bind(this, false)}
                style={styles.modalButton}>
                Close
              </Button>
            </View>
          </View>
        </Modal>
        <View style={styles.row}>
          <Text style={styles.rowTitle}>Animation Type</Text>
          <Button onPress={this._setAnimationType.bind(this, 'none')} style={this.state.animationType === 'none' ? activeButtonStyle : {}}>
            none
          </Button>
          <Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? activeButtonStyle : {}}>
            slide
          </Button>
          <Button onPress={this._setAnimationType.bind(this, 'fade')} style={this.state.animationType === 'fade' ? activeButtonStyle : {}}>
            fade
          </Button>
        </View>

        <View style={{marginTop:50,flexDirection: 'row',alignItems: 'center',justifyContent: 'center'}}>
          <Text style={{color:'grey',fontWeight: 'bold',marginRight:20}}>Transparent</Text>
          <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
        </View>

        <Button onPress={this._setModalVisible.bind(this, true)}>
          Present
        </Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
 container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  innerContainer: {
    borderRadius: 10,
    alignItems: 'center',
  },
  row: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
    marginBottom: 20,
  },
  rowTitle: {
    flex: 1,
    fontWeight: 'bold',
  },
  button: {
    borderRadius: 5,
    flex: 1,
    height: 44,
    alignSelf: 'stretch',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  buttonText: {
    fontSize: 18,
    margin: 5,
    textAlign: 'center',
  },
  modalButton: {
    marginTop: 10,
  },
  pickerItem: {
    fontSize: 16,
  },
});

AppRegistry.registerComponent('ModalDemo', () => ModalDemo);

这个例子内容比较多,大家仔细看看,最好动手实践一下,这样才能掌握的更加熟练。

本文分享自微信公众号 - 非著名程序员(non-famous-coder),作者:loonggg

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基础篇章:关于 React Native 之 RefreshControl 组件的讲解

    (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 我们已经讲完了 ScrollView 和 L...

    非著名程序员
  • Android开发工具之ParcelUtils和SerializeUtils

    今天我们来讲的这两个工具类是在Activity之间跳转时常常要传递的和对象序列化什么有关的。那么接下来,我们来看看吧! SerializeUtils 包含一...

    非著名程序员
  • 一次关闭所有Activity和连续点击两次返回键关闭程序的方法

    最近有人问我怎么样一次关闭应用程序里所有的Activity的方法,有人说用队列存储的方式,关闭的时候,一个一个的取出再Finish掉。其实个人认为最好的方法就是...

    非著名程序员
  • 浅谈前端响应式设计(一)

    现实世界有很多是以响应式的方式运作的,例如我们会在收到他人的提问,然后做出响应,给出相应的回答。在开发过程中我也应用了大量的响应式设计,积累了一些经验,希望能抛...

    有赞coder
  • vue项目使用 富文本 封装

    我又来了,今天给大家分享一个富文本框的封装,写后台管理也离不开富文本框,我就做了封装,供大家参考,

    前端小白@阿强
  • 寿司开卖:实现寿司制作特效和音响特效

    本节我们将继续上一节完成若干个小功能。首先要完成的是,当客户动画在主页面出现时,它左上角会冒泡,显示它想购买何种寿司,此时玩家可以点击左下角面板中各种元素,组合...

    望月从良
  • 【译】理解JavaScript中的This,Bind,Call和Apply

    this关键词在JavaScript中是个很重要的概念,也是一个对初学者和学习其他语言的人来说晦涩难懂。在JavaScript中,this是一个对象的引用。th...

    嘉明
  • JS回调函数中的 this 指向(详细)

    1. obj.fun() fun 中的 this->obj ,自动指向.前的对象

    TimothyJia
  • 小游戏入门

    极乐君
  • WordPress博客网站下雪特效

    沈唁

扫码关注云+社区

领取腾讯云代金券