ReactNative之Modal控件如何自定义弹出View-创新互联

这篇文章主要介绍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许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：ReactNative之Modal控件如何自定义弹出View-创新互联
文章来源：http://cdiso.cn/article/coeios.html