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

Modal 组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。

原本项目：https://github.com/brentvatne/react-native-modal

Modal 第三方的组件现已被官方吸纳，无需安装。

属性如下：

• animationType：动画类型 enum('none', 'slide', 'fade')
• onRequestClose：在Android平台是必须的，否则报警，比如按返回键时调用
• onShow：显示时触发
• transparent：是否透明
• visible：是否显示

实例：订购火车票的票务信息

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @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>乘车人：Joe.Ye</Text>
                                <Text>上海 虹桥站 网售</Text>
                            </View>
                            <View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 20 }}>
                                <View style={[styles.mp10, styles.btn, { alignItems: 'center' }, {marginRight: 10}]}>
                                    <Text style={styles.btn_text}>立即支付</Text>
                                </View>
                                <View style={[styles.mp10, styles.btn, { alignItems: 'center' }, {marginLeft: 10}]}>
                                    <Text style={styles.btn_text} onPress={this._setModalVisible.bind(this, false)}>返回</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </Modal>

                <Text style={styles.order} onPress={this._setModalVisible.bind(this, true)}>预定火车票</Text>
                <View style={styles.flex} />
                <Text style={styles.author}>Powered by RNAPP.CC</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: 80,
        height: 30,
        borderRadius: 3,
        backgroundColor: '#FFBA27',
        padding: 5,
    },
    btn_text: {
        lineHeight: 18,
        textAlign: 'center',
        color: '#fff',
    },
    order: {
        fontSize: 25,
        color: 'white',
        backgroundColor: '#3BC1FF',
        paddingLeft: 20,
        paddingRight: 20,
        marginTop: 50,
    },
    author: {
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginBottom: 10,
        textAlign: 'center',
        fontSize: 16,
        color: '#3BC1FF',
    },
});

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