这篇文章主要介绍React Native之Modal控件如何自定义弹出View，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
成都创新互联-专业网站定制、快速模板网站建设、高性价比太和网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式太和网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖太和地区。费用合理售后完善，10年实体公司更值得信赖。前言
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 (
{}}
onRequestClose={() => {}} >
提示
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”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
