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