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 (
            1}}>

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

github下载地址