本文共 3616 字，大约阅读时间需要 12 分钟。

(一)前言

今天我们来看一下React Native控件Modal具体介绍以及实际使用方法,该适配Android、iOS双平台。

http://www.open-open.com/lib/view/open1462870341406.html

刚创建的React Native技术交流4群( 458982758 ),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

Modal视图在iOS原生开发中熟称:"模态视图",Modal进行封装之后，可以弹出来覆盖包含React Native跟视图的原生界面(例如:UiViewControllView,Activity)。在使用React Native开发的混合应用中使用Modal组件，该可以让你使用RN开发的内功呈现在原生视图的上面。

如果你使用React Native开发的应用，从跟视图就开始开发起来了，那么你应该是Navigator导航器进行控制页面弹出，而不是使用Modal模态视图。通过顶层的Navigator，你可以使用configureScene属性进行控制如何在你开发的App中呈现一个Modal视图。

(二)属性方法

1.animated bool  控制是否带有动画效果

2.onRequestClose  Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func

3.onShow function方法

4.transparent bool  控制是否带有透明效果

5.visible  bool 控制是否显示

(三)实例

上面我们已经对于Modal组件做了相关介绍，下面我们使用一个实例具体来演示一下Modal组件的基本用法。首先来看一下具体代码:

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {  AppRegistry,  Component,  StyleSheet,  Text,  View,  TouchableHighlight,  Modal,  Switch,} from 'react-native';class Button extends React.Component {  constructor(props){    super(props);    this.state={      active: false,    };    this._onHighlight = this.onHighlight.bind(this);    this._onUnhighlight = this.onUnhighlight.bind(this);  }  onHighlight() {    this.setState({active: true,});  }  onUnhighlight() {    this.setState({active: false,});  }  render() {    var colorStyle = {      color: this.state.active ? '#fff' : '#000',    };    return (      
             
    
     {this.props.children}
          
       );  }}class ModalDemo extends Component {  constructor(props){    super(props);    this.state={      animationType: false,      modalVisible: false,      transparent: false,    };    this._toggleTransparent = this.toggleTransparent.bind(this);  }  _setModalVisible(visible) {    this.setState({modalVisible: visible});  }  _setAnimationType(type) {    this.setState({animationType: type});  }  toggleTransparent() {    this.setState({transparent: !this.state.transparent});  }  render() {     const modalBackgroundStyle = {      backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',     }     const innerContainerTransparentStyle = this.state.transparent      ? {backgroundColor: 'red', padding: 20}      : null   return (      
           
    
     Modal实例演示
            
    
      {this._setModalVisible(false)}}          >          
                 
                    
       
        Modal视图被显示:{this.state.animationType === false ? '没有' : '有',this.state.animationType}动画效果.
                     
                         关闭Modal                          
                
             
            
              
     
      动画类型
               
                 无动画                    
                 滑动效果                  
            
              
     
      透明
               
             
            
                显示Modal              
       )}  }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,  },});AppRegistry.registerComponent('ModalDemo', () => ModalDemo);

运行效果如下:

iOS平台运行效果

Android平台运行效果:

来自： http://www.lcode.org/react-native-控件之modal详解-androidios双平台通用56/

转载地址：http://oneni.baihongyu.com/