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

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);

1.png