React Native之Modal控件如何自定义弹出View

这篇文章主要介绍React Native之Modal控件如何自定义弹出View，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

前言

Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。

在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。

下面是代码：

// HomePage  // 功能: 该类的作用  // Created by 小广 on 2016-06-12 上午.  // Copyright &copy; 2016年 All rights reserved.    'use strict';  import React, { Component } from 'react';  import {   View,   Text,   Image,   Modal,   Navigator,   TextInput,   ScrollView,   StyleSheet,   Dimensions,   TouchableHighlight,  } from 'react-native';  import NavigatorBar from '../tools/navigator'  var { width, height, scale } = Dimensions.get('window');  // 类  export default class HomePage extends Component {   // 构造函数   constructor(props) {   super(props);   this.state = {    show:false,   };   }     // 加载完成   componentDidMount(){   //   }     // view卸载   componentWillUnmount(){   //   }     // 自定义方法区域   // your method   _leftButtonClick() {     }   _rightButtonClick() {   //   console.log('右侧按钮点击了');   this._setModalVisible();   }     // 显示/隐藏 modal   _setModalVisible() {   let isShow = this.state.show;   this.setState({    show:!isShow,   });   }     // 绘制View   render() {    return (    <View style={styles.container}>     <NavigatorBar     title='Modal测试'     titleTextColor='#F2380A'     rightItemTitle='按钮'     rightTextColor='#F2380A'     rightItemFunc={this._rightButtonClick.bind(this)} />     <Modal     animationType='slide'     transparent={true}     visible={this.state.show}     onShow={() => {}}     onRequestClose={() => {}} >     <View style={styles.modalStyle}>      <View style={styles.subView}>      <Text style={styles.titleText}>       提示      </Text>      <Text style={styles.contentText}>       Modal显示的View 多行了超出一行了会怎么显示，就像这样显示了很多内容该怎么显示，看看效果      </Text>      <View style={styles.horizontalLine} />      <View style={styles.buttonView}>       <TouchableHighlight underlayColor='transparent'       style={styles.buttonStyle}       onPress={this._setModalVisible.bind(this)}>       <Text style={styles.buttonText}>        取消       </Text>       </TouchableHighlight>       <View style={styles.verticalLine} />       <TouchableHighlight underlayColor='transparent'       style={styles.buttonStyle}       onPress={this._setModalVisible.bind(this)}>       <Text style={styles.buttonText}>        确定       </Text>       </TouchableHighlight>      </View>      </View>     </View>    </Modal>    </View>    );   }    }  // Modal属性  // 1.animationType bool 控制是否带有动画效果  // 2.onRequestClose Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func  // 3.onShow function方法  // 4.transparent bool 控制是否带有透明效果  // 5.visible bool 控制是否显示    // css样式  var styles = StyleSheet.create({   container:{   flex:1,   backgroundColor: '#ECECF0',   },   // modal的样式   modalStyle: {   // backgroundColor:'#ccc',   alignItems: 'center',   justifyContent:'center',   flex:1,   },   // modal上子View的样式   subView:{   marginLeft:60,   marginRight:60,   backgroundColor:'#fff',   alignSelf: 'stretch',   justifyContent:'center',   borderRadius: 10,   borderWidth: 0.5,   borderColor:'#ccc',   },   // 标题   titleText:{   marginTop:10,   marginBottom:5,   fontSize:16,   fontWeight:'bold',   textAlign:'center',   },   // 内容   contentText:{   margin:8,   fontSize:14,   textAlign:'center',   },   // 水平的分割线   horizontalLine:{   marginTop:5,   height:0.5,   backgroundColor:'#ccc',   },   // 按钮   buttonView:{   flexDirection: 'row',   alignItems: 'center',   },   buttonStyle:{   flex:1,   height:44,   alignItems: 'center',   justifyContent:'center',   },   // 竖直的分割线   verticalLine:{   width:0.5,   height:44,   backgroundColor:'#ccc',   },   buttonText:{   fontSize:16,   color:'#3393F2',   textAlign:'center',   },  });

注意：NavigatorBar是我自定义的一个View，充当导航条，你可以将其换成一个按钮就行了；

效果如图：

以上是“React Native之Modal控件如何自定义弹出View”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！