React Native之Modal组件实现遮罩层效果

/**
* React Native App
* dongtao 2017/04/22
* @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Modal,
PixelRatio,
View
} from 'react-native';

class ModalDemo extends Component {

constructor(props) {
super(props);//这一句不能省略，照抄即可
this.state = {
animationType: 'none',//none slide fade
modalVisible: false,//模态场景是否可见
transparent: true,//是否透明显示
};
}

render() {
let modalBackgroundStyle = {
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : 'red',
};
let innerContainerTransparentStyle = this.state.transparent
? { backgroundColor: '#fff', padding: 20 }
: null;

return (

<View style={{ alignItems: 'center', flex: 1 }}>
<Modal
animationType={this.state.animationType}
transparent={this.state.transparent}
visible={this.state.modalVisible}
onRequestClose={() => { this._setModalVisible(false) } }
onShow={this.startShow}
>
<View style={[styles.container, modalBackgroundStyle]}>
<View style={[styles.innerContainer, innerContainerTransparentStyle]}>
<Text style={styles.date}>2016-08-11</Text>
<View style={styles.row}>
<View >
<Text style={styles.station}>长沙站</Text>
<Text style={styles.mp10}>8: 00出发</Text>
</View>
<View>
<View style={styles.at}></View>
<Text style={[styles.mp10, { textAlign: 'center' }]}>G888</Text>
</View>
<View >
<Text style={[styles.station, { textAlign: 'right' }]}>北京站</Text>
<Text style={[styles.mp10, { textAlign: 'right' }]}>18: 00抵达</Text>
</View>
</View>
<View style={styles.mp10}>
<Text>票价：￥600.00元</Text>
<Text>乘车人：东方耀</Text>
<Text>长沙站 火车南站 网售</Text>
</View>
<View style={[styles.mp10, styles.btn, { alignItems: 'center' }]}>
<Text style={styles.btn_text}>去支付</Text>
</View>
<Text
onPress={this._setModalVisible.bind(this,false) }
style={{fontSize:20,marginTop:10}}>
关闭
</Text>
</View>
</View>
</Modal>

<Text style={{ fontSize: 30,color:'red' }}  onPress={this._setModalVisible.bind(this, true) }>预定火车票</Text>

</View>
);
}

_setModalVisible = (visible) => {
this.setState({ modalVisible: visible });
}

startShow=()=>{
alert('开始显示了');
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 40,
},
innerContainer: {
borderRadius: 10,
alignItems: 'center',
},
row: {
alignItems: 'center',

flex: 1,
flexDirection: 'row',
marginBottom: 20,
},
rowTitle: {
flex: 1,
fontWeight: 'bold',
},
button: {
borderRadius: 5,
flex: 1,
height: 44,
alignSelf: 'stretch',
justifyContent: 'center',
overflow: 'hidden',
},
buttonText: {
fontSize: 18,
margin: 5,
textAlign: 'center',
},

page: {
flex: 1,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
top: 0,
},
zhifu: {
height: 150,
},

flex: {
flex: 1,
},
at: {
borderWidth: 1 / PixelRatio.get(),
width: 80,
marginLeft:10,
marginRight:10,
borderColor: '#18B7FF',
height: 1,
marginTop: 10

},
date: {
textAlign: 'center',
marginBottom: 5
},
station: {
fontSize: 20
},
mp10: {
marginTop: 5,
},
btn: {
width: 60,
height: 30,
borderRadius: 3,
backgroundColor: '#FFBA27',
padding: 5,
},
btn_text: {
lineHeight: 18,
textAlign: 'center',
color: '#fff',
},
});

AppRegistry.registerComponent('ModalDemo', () => ModalDemo);