React Native 弹出框

RN为我们提供了一个跨平台通用的Modal组件，我们可以用它来实现一个弹出框的视图。

先上效果图：



代码如下：

/**
* Created by gyg on 2017/5/11.
* 自定义弹出框组件
*/
'use strict'
import React, {Component} from 'react';
import {
StyleSheet,
View,
Text,
TouchableHighlight,
Modal,
}from 'react-native';

export default class CustomModal extends Component {

render() {
return (
<Modal
visible={this.props.visibility}
transparent={true}
animationType={'fade'}//none slide fade
onRequestClose={()=>this.setState({visibility:false})}
>
<View style={styles.container}>
<View style={styles.modalContainer}>
<Text style={styles.modalTitle}>{this.props.title}</Text>
<Text style={styles.modalMessage}>{this.props.message}</Text>
<View style={styles.horizonLine}/>
<View style={styles.row}>
<TouchableHighlight style={styles.leftBn} onPress={this.props.onLeftPress} underlayColor={'#C5C5C5'}>
<Text style={styles.leftBnText}>取消</Text>
</TouchableHighlight>
<View style={styles.verticalLine}/>
<TouchableHighlight style={styles.rightBn} onPress={this.props.onRightPress}
underlayColor={'#C5C5C5'} >
<Text style={styles.rightBnText}>确定</Text>
</TouchableHighlight>
</View>
</View>
</View>
</Modal>
)
}
}

const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'rgba(0, 0, 0, 0.5)',
justifyContent:'center',
alignItems:'center'
},
modalContainer: {
marginLeft: 20,
marginRight: 20,
borderRadius: 3,
backgroundColor: "white",
alignItems:'center',
},
modalTitle: {
color: '#000000',
fontSize: 16,
marginTop: 10,
},
modalMessage:{
color:'#8a8a8a',
fontSize:14,
margin:10,
},
row:{
flexDirection:'row',
alignItems:'center',
},
horizonLine:{
backgroundColor:'#9f9fa3',
height:0.5,
alignSelf:'stretch'
},
verticalLine:{
backgroundColor:'#9f9fa3',
width:1,
alignSelf:'stretch'
},
leftBn:{
borderBottomLeftRadius:3,
padding:7,
flexGrow:1,
justifyContent:'center',
alignItems:'center',
},
leftBnText:{
fontSize:16,
color:'#8a8a8a',
},
rightBn:{
borderBottomRightRadius:3,
padding:7,
flexGrow:1,
justifyContent:'center',
alignItems:'center',
},
rightBnText:{
fontSize:16,
color:'#00A9F2'
}
})

visible bool 控制弹出框隐藏(false)或显示(true)

transparent bool 控制弹出框背景，若为false则弹出框背景为灰色，会挡住弹出框后面的内容，true时才为modal根视图的背景颜色。

animationType string 控制弹出框的动画效果 有三个值：none slide fade

onRequestClose func 当请求关闭时执行

使用：

<CustomModal title="标题" message="消息"  ref="_customModal" visibility={this.state.modalVisibility}
onLeftPress={()=>{this.setState({modalVisibility:false})}} onRightPress={()=>{this.setState({modalVisibility:false})}}/>

源码