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(
            
                 {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.")}}>
                    
                        
                            Hello World!
                             {
                                this.setModalVisible(false)
                            }}>
                                隐藏 Modal
                            
                        
                    
                
                 {
                    this.setModalVisible(true)
                }}>
                    显示 Modal
                
            
        )
    }
}
AppRegistry.registerComponent('ModalView', ()=>ModalView);

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

Untitled10.gif