rn 模态框Modal(配置内部视图出现/消失时的动画)

模态框占据全屏出现后即会占据全屏,意味着要在模态框的视图内提供关闭模态框的事件
	
1、导入
	import {Modal} from 'react-native'

2、使用
    <Modal
      visible={布尔值}  控制视图的显示和隐藏
      onRequestClose={()=>{}}  android必填,会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必填，且会在 modal 处于开启状态时阻止BackHandler事件。
      transparent={false}	布尔值,模态框是否透明/白色
      animationType='slide'	进出场方式'none', 'slide', 'fade'
   >
		...内部视图
  </Modal>

3、参数
	supportedOrientations	supportedOrientations用于指定在设备切换横竖屏方向时，modal 会在哪些屏幕朝向下跟随旋转。在 iOS 上，除了本属性外，还会受到应用的 Info.plist 文件中UISupportedInterfaceOrientations的限制。如果还设置了presentationStyle属性为pageSheet或formSheet，则在 iOS 上本属性将被忽略。
		值:'portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'
	
	onShow	回调函数会在 modal 显示时调用。
	hardwareAccelerated	属性决定是否强制启用硬件加速来绘制弹出层。
	statusBarTranslucent	决定你的modal是否应该在系统状态栏下运行。
	onDismiss	回调会在 modal 被关闭时调用
	onOrientationChange	模态窗显示的时候，当设备方向发生更改时，将调用onOrientationChange回调方法。 提供的设备方向仅为“竖屏”或“横屏”。 无论当前方向如何，也会在初始渲染时调用此回调方法。
	presentationStyle	决定 modal（在较大屏幕的设备比如 iPad 或是 Plus 机型）如何展现
	    fullScreen完全盖满屏幕。
	    pageSheet竖直方向几乎盖满，水平居中，左右留出一定空白（仅用于大屏设备）。
	    formSheet竖直和水平都居中，四周都留出一定空白（仅用于大屏设备）。
	    overFullScreen完全盖满屏幕，同时允许透明。

代码示例:

import React,{Component} from 'react'
import {
  View,
  Text,
  StyleSheet,
  Modal,
  Button,
  Alert
} from 'react-native'

class Ht extends Component{
    state={
        show:false
    }
    render()
    {
        return(

            <View>
                <View style={{width:'100%',height:100,backgroundColor:'red'}}>
                    <Modal
                        visible={this.state.show}
                        onRequestClose={()=>{Alert.alert("Modal has been closed.");}}
                        transparent={false}
                        animationType='slide'
                        
                    >
                        <View style={{width:'100%',height:100,backgroundColor:'red'}}>
                            <Text style={{backgroundColor:'red'}}>ht</Text>
                            <Button
                                title='关'
                                onPress={()=>{
                                    console.warn('aa')
                                    this.setState({
                                        show:false
                                    })
                                    
                                }}
                            />
                        </View>
                    </Modal>
                </View>
                <Button
                    title='开'
                    onPress={()=>{
                        console.log('bb')
                        this.setState({
                            show:true
                        })
                    }}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({


})

export default Ht

效果图: