Modal
Modal 组件是一种简单的覆盖在其他视图之上显示内容的方式。
示例
- 函数式组件
- Class 组件
文档
Props
visible
visible属性决定 modal 是否显示。
| 类型 | 必需 |
|---|---|
| bool | 否 |
supportedOrientations
supportedOrientations用于指定在设备切换横竖屏方向时,modal 会在哪些屏幕朝向下跟随旋转。在 iOS 上,除了本属性外,还会受到应用的 Info.plist 文件中UISupportedInterfaceOrientations的限制。如果还设置了presentationStyle属性为pageSheet或formSheet,则在 iOS 上本属性将被忽略。
| 类型 | 必需 | 平台 |
|---|---|---|
| array of enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right') | 否 | iOS |
onRequestClose
onRequestClose回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必需,且会在 modal 处于开启状态时阻止BackHandler事件。
| 类型 | 必需 | 平台 |
|---|---|---|
| function | 是 | Android, Platform.isTVOS |
| function | 否 | (Others) |
onShow
onShow回调函数会在 modal 显示时调用。
| 类型 | 必需 |
|---|---|
| function | 否 |
transparent
transparent 属性是指背景是否透明,默认为白色,将这个属性设为:true 的时候弹出一个透明背景层的 modal。
| 类型 | 必需 |
|---|---|
| bool | 否 |
animationType
animationType指定了 modal 的动画类型。
slide从底部滑入滑出。fade淡入淡出。none没有动画,直接蹦出来。
默认值为none。
| 类型 | 必需 |
|---|---|
| enum('none', 'slide', 'fade') | 否 |
hardwareAccelerated
hardwareAccelerated属性决定是否强制启用硬件加速来绘制弹出层。
| 类型 | 必需 | 平台 |
|---|---|---|
| bool | 否 | Android |
statusBarTranslucent
The statusBarTranslucent prop determines whether your modal should go under the system statusbar.
| 类型 | 必需 | 平台 |
|---|---|---|
| bool | 否 | Android |
onDismiss
onDismiss回调会在 modal 被关闭时调用。
| 类型 | 必需 | 平台 |
|---|---|---|
| function | 否 | iOS |
onOrientationChange
模态窗显示的时候,当设备方向发生更改时,将调用onOrientationChange回调方法。 提供的设备方向仅为“竖屏”或“横屏”。 无论当前方向如何,也会在初始渲染时调用此回调方法。
| 类型 | 必需 | 平台 |
|---|---|---|
| function | 否 | iOS |
presentationStyle
presentationStyle决定 modal(在较大屏幕的设备比如 iPad 或是 Plus 机型)如何展现。更多细节请参阅 https://developer.apple.com/reference/uikit/uimodalpresentationstyle
fullScreen完全盖满屏幕。pageSheet竖直方向几乎盖满,水平居中,左右留出一定空白(仅用于大屏设备)。formSheet竖直和水平都居中,四周都留出一定空白(仅用于大屏设备)。overFullScreen完全盖满屏幕,同时允许透明。
默认会根据transparent属性而设置为overFullScreen或是fullScreen。
| 类型 | 必需 | 平台 |
|---|---|---|
| enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen') | 否 | iOS |