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下载地址