Modal
Modal 组件是一种在封闭视图之上展示内容的基本方式。
示例
参考
属性
View Props
继承自 View Props。
🗑️ animated
请改用 animationType 属性。
animationType
animationType 属性控制模态框的动画方式。
可选值:
slide从底部滑入fade淡入视图none不带动画地出现
| Type | Default |
|---|---|
enum('none', 'slide', 'fade') | none |
backdropColor
模态框的 backdropColor(或模态框容器的背景色)。如果未提供且 transparent 为 false,默认值为 white。如果 transparent 为 true,则会被忽略。
| Type | Default |
|---|---|
| color | white |
hardwareAccelerated Android
hardwareAccelerated 属性控制是否为底层窗口强制启用硬件加速。
| Type | Default |
|---|---|
| bool | false |
navigationBarTranslucent Android
navigationBarTranslucent 属性决定模态框是否应该显示在系统导航栏下方。不过,要让导航栏透明,还需要将 statusBarTranslucent 设为 true。
| Type | Default |
|---|---|
| bool | false |
onDismiss iOS
onDismiss 属性允许传入一个函数,该函数会在模态框被关闭后调用一次。
| Type |
|---|
| function |
onOrientationChange iOS
当模态框显示时方向发生变化,会调用 onOrientationChange 回调。提供的方向只有 'portrait' 或 'landscape'。无论当前方向如何,这个回调也会在初始渲染时调用。
| Type |
|---|
| function |
allowSwipeDismissal iOS
控制是否可以在 iOS 上通过向下滑动来关闭模态框。
这要求你实现 onRequestClose 属性来处理关闭行为。
| Type | Default |
|---|---|
| bool | false |
ref
挂载时会被赋值为一个 element node 的 ref 设置器。
onRequestClose
当用户在 Android 上按下硬件返回按钮,或在 Apple TV 上按下菜单按钮时,会调用 onRequestClose 回调。由于这是必需属性,只要模态框处于打开状态,就不会触发 BackHandler 事件。
在 iOS 上,当使用 presentationStyle 为 pageSheet 或 formSheet 的拖拽手势关闭 Modal 时,会调用此回调。启用 allowSwipeDismissal 后,在关闭模态框之后也会调用此回调。
| Type |
|---|
| function Required Android TV function iOS |
onShow
onShow 属性允许传入一个函数,该函数会在模态框显示后调用一次。
| Type |
|---|
| function |
presentationStyle iOS
presentationStyle 属性控制模态框的显示方式(通常用于 iPad 或大屏 iPhone 等较大设备)。详情请参阅 https://developer.apple.com/reference/uikit/uimodalpresentationstyle。
可选值:
fullScreen完全覆盖屏幕pageSheet覆盖居中的竖屏宽度视图(仅在较大设备上)formSheet覆盖居中的窄宽度视图(仅在较大设备上)overFullScreen完全覆盖屏幕,但允许透明
| Type | Default |
|---|---|
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen') | fullScreen if transparent={false}overFullScreen if transparent={true} |
statusBarTranslucent Android
statusBarTranslucent 属性决定模态框是否应该显示在系统状态栏下方。
| Type | Default |
|---|---|
| bool | false |
supportedOrientations iOS
supportedOrientations 属性允许模态框旋转到指定的任意方向。在 iOS 上,模态框仍会受到应用 Info.plist 中 UISupportedInterfaceOrientations 字段的限制。
当使用 pageSheet 或 formSheet 的 presentationStyle 时,此属性在 iOS 上会被忽略。
| Type | Default |
|---|---|
array of enums('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right') | ['portrait'] |
transparent
transparent 属性决定模态框是否会填满整个视图。将其设置为 true 会在透明背景上渲染模态框。
| Type | Default |
|---|---|
| bool | false |
visible
visible 属性决定模态框是否可见。
| Type | Default |
|---|---|
| bool | true |