React-Native Modal实现遮罩界面

Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
实现遮罩的功能

属性：
animationType：三个值slide：从下弹出，fade：淡出方式，none：直接显示

transparent：为true的时候modal会覆盖在上面，false时会出现一个白色的底，然后modal覆盖在白色底上面

visible：true为弹出modal，false为隐藏

onrequestclose：iOS好像无效

onShow：当modal显示时调用

supportedOrientations：支持设备旋转的方向
['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']

onOrientationChange：设备方向改变时调用

实现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);

测试发现onOrientationChange好像每次都会调用，总觉得应该是方向改变后才会调用一次。

Untitled10.gif