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

川长思鸟来 2021-07-24 21:42 332阅读 0赞

模态框占据全屏出现后即会占据全屏,意味着要在模态框的视图内提供关闭模态框的事件
    	
    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

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/1156f1518b664ef0b10e9c1b1528b5ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/3f6f454505154ff289ed6e7a8f17da73.png