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