前言

最近在学习RN，好多知识都懒得写，趁今天有空，来一发吧，Modal控件的一个小demo；下面话不多说了，来一起看看详细的介绍吧。

参考文章地址：http://reactnative.cn/docs/0.27/modal.html#content

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

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

下面是代码：

// HomePage // 功能: 该类的作用 // Created by 小广 on 2016-06-12 上午. // Copyright © 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，充当导航条，你可以将其换成一个按钮就行了；

效果如图：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。