Modal可以使你應(yīng)用中RN編寫的那部分內(nèi)容覆蓋在原生視圖上顯示潭辈。
實現(xiàn)遮罩的功能

屬性：
animationType：三個值slide：從下彈出澈吨，fade：淡出方式，none：直接顯示

transparent：為true的時候modal會覆蓋在上面修赞，false時會出現(xiàn)一個白色的底桑阶，然后modal覆蓋在白色底上面

visible：true為彈出modal，false為隱藏

onrequestclose：iOS好像無效

onShow：當(dāng)modal顯示時調(diào)用

supportedOrientations：支持設(shè)備旋轉(zhuǎn)的方向
['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']

onOrientationChange：設(shè)備方向改變時調(diào)用

實現(xiàn)modal代碼：

import React, { Component} from 'react';
import  {
    AppRegistry,
    View,
    Modal,
    TouchableOpacity,
    Text
} from 'react-native';

export default class ModalView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
        }
    }
    setModalVisible = (visible)=> {
        this.setState({
           modalVisible: visible
        })
    };
    render(){
        return(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffaaff'}}>
                <Modal animationType={'none'}
                       transparent={true}
                       visible={this.state.modalVisible}
                       onrequestclose={() => {alert("Modal has been closed.")}}
                       onShow={() => {alert("Modal has been open.")}}
                       supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
                       onOrientationChange={() => {alert("Modal has been OrientationChange.")}}>
                    <View style={{flex:1, marginTop: 22, backgroundColor: '#aaaaaa', justifyContent: 'center', alignItems: 'center'}}>
                        <View>
                            <Text>Hello World!</Text>
                            <TouchableOpacity onPress={() => {
                                this.setModalVisible(false)
                            }}>
                                <Text>隱藏 Modal</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Modal>
                <TouchableOpacity onPress={() => {
                    this.setModalVisible(true)
                }}>
                    <Text>顯示 Modal</Text>
                </TouchableOpacity>
            </View>
        )
    }
}
AppRegistry.registerComponent('ModalView', ()=>ModalView);

測試發(fā)現(xiàn)onOrientationChange好像每次都會調(diào)用，總覺得應(yīng)該是方向改變后才會調(diào)用一次锨推。

Untitled10.gif