ReactNative之Modal控件如何自定义弹出View
这篇文章主要介绍React Native之Modal控件如何自定义弹出View,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联专业为企业提供峰峰矿网站建设、峰峰矿做网站、峰峰矿网站设计、峰峰矿网站制作等企业网站建设、网页设计与制作、峰峰矿企业网站模板建站服务,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 (); } } // 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', }, }); {}} onRequestClose={() => {}} > 提示 Modal显示的View 多行了超出一行了会怎么显示,就像这样显示了很多内容该怎么显示,看看效果 取消 确定
注意:NavigatorBar是我自定义的一个View,充当导航条,你可以将其换成一个按钮就行了;
效果如图:
以上是“React Native之Modal控件如何自定义弹出View”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
新闻名称:ReactNative之Modal控件如何自定义弹出View
当前URL:http://scyanting.com/article/pdjjgs.html