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

效果如图：