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
} 'react-native';


class ModalDemo extends Component {

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

  render() {
    let modalBackgroundStyle = {
      backgroundColor: this.state.transparent ? 'rgba(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} > {[styles.container, modalBackgroundStyle]}> {[styles.innerContainer, innerContainerTransparentStyle]}> Text style={styles.date}>2016-08-11</Text> {styles.row}> View > {styles.station}>长沙站{styles.mp10}>8: 00出发View> {styles.at}>{[styles.mp10, { textAlign: 'center' }]}>G888{[styles.station, { textAlign: 'right' }]}>北京站textAlign: 'right' }]}>18: 00抵达{styles.mp10}> Text>票价：￥600.00元Text>乘车人：东方耀Text>长沙站 火车南站 网售styles.btn,{ alignItems: 'center' }]}> {styles.btn_text}>去支付Text onPress={this._setModalVisible.bind(this,false) } style={{fontSize:20,marginTop:10}}> 关闭 Modal> {{ fontSize: 30,color:'red' }} onPress=true) }>预定火车票View>
    );
  }


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

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




}

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',152);">40,},innerContainer: {
    borderRadius: 10,alignItems: row: {
    alignItems: flex: flexDirection: 'row',marginBottom: 20,rowTitle: {
    flex: fontWeight: 'bold',button: {
    borderRadius: 5,height: 44,alignSelf: 'stretch',overflow: 'hidden',buttonText: {
    fontSize: 18,margin: textAlign: page: {
    flex: position: 'absolute',bottom: 0,left: right: top: zhifu: {
    height: 150,flex: {
    flex: at: {
    borderWidth: 1 / PixelRatio.get(),width: 80,marginLeft:marginRight:borderColor: '#18B7FF',marginTop: 10

  },date: {
    textAlign: 5
  },station: {
    fontSize: 20
  },mp10: {
    marginTop: btn: {
    width: 60,152);">30,borderRadius: 3,backgroundColor: '#FFBA27',btn_text: {
    lineHeight: color: 'ModalDemo',() => ModalDemo);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!