React Native学习教程之Modal控件自定义弹出View详解

前言

最近在学习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，充当导航条，你可以将其换成一个按钮就行了；

效果如图：

总结

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

您可能感兴趣的文章:

• React-Native 组件之 Modal的使用详解