react native Modal 使用详解

Modal 是可以覆盖在原生视图上。
属性：

animationType：显示和隐藏的动画

• slide：从底部弹出
• fade：渐隐渐显
• none：无

onRequestClose：android 按返回键时回调。
onShow：modal显示时回调。
transparent：背景是否透明，默认为白色。
visible：是否显示。

/**
 * Created by on 2017/5/8.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Modal,
    Button,
    Alert,
} from 'react-native';

export default class ModalDemo extends Component {

    static navigationOptions = {
        title: 'Modal',
    };

    state = {
        visible: false,
        transparent: true,
    }

    render() {
        return (
            <View style={{flex:1}}>

                <Button title='显示Modal' onPress={()=>{this.setState({visible:true})}}/>
                <Modal
                    visible={this.state.visible}
                    transparent={this.state.transparent}
                    onRequestClose={()=>{
                        Alert.alert("Modal has been closed.");
                    }}
                    onShow={()=>{
                        Alert.alert("Modal has been show.");
                    }}>
                    <View
                        style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'rgba(0, 0, 0, 0.3)'}}>
                        <View style={{height:200,width:275,backgroundColor:'white'}}>
                            <Button title='关闭Modal' onPress={()=>{this.setState({visible:false})}}/>
                            <Button title={this.state.transparent?'不透明':'透明'} onPress={()=>{this.setState({transparent:!this.state.transparent})}}/>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }
}

github下载地址