跳至主内容

模态框

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

Modal 组件是在包含视图上方展示内容的基础方式。

示例​

参考

属性​

View 属性​

继承 View 属性。

🗑️ animated​

已弃用

请改用 animationType 属性。

animationType​

animationType 属性控制模态框的动画效果。

可选值：

  • slide 从底部滑入

  • fade 淡入显示

  • none 无动画显示

TypeDefault
enum('none', 'slide', 'fade')none

backdropColor​

模态框的 backdropColor（或其容器的背景色）。当 transparent 为 false 时默认为 white。若 transparent 为 true 则此属性无效。

TypeDefault
colorwhite

hardwareAccelerated
Android
​

hardwareAccelerated 属性控制是否强制底层窗口使用硬件加速。

TypeDefault
boolfalse

navigationBarTranslucent 属性决定模态框是否延伸到系统导航栏下方。但要使导航栏透明，还需将 statusBarTranslucent 设为 true。

TypeDefault
boolfalse

onDismiss
iOS
​

onDismiss 属性接收的函数会在模态框关闭后被调用。

Type
function

onOrientationChange
iOS
​

onOrientationChange 回调在模态框显示期间设备方向改变时触发。方向参数仅限 'portrait'（竖屏）或 'landscape'（横屏）。此回调在初始渲染时也会触发，无论当前方向如何。

Type
function

allowSwipeDismissal
iOS
​

控制在 iOS 上是否支持下滑手势关闭模态框。 启用此功能需实现 onRequestClose 属性来处理关闭操作。

TypeDefault
boolfalse

ref​

一个在组件挂载时会被赋予元素节点的 ref 设置器。

onRequestClose​

当用户按下 Android 设备的返回键或 Apple TV 的菜单键时会触发 onRequestClose 回调。请注意：由于这是必需属性，在模态框打开期间 BackHandler 事件将不会被触发。 在 iOS 上，当 presentationStyle 设为 pageSheet or formSheet 时，通过拖拽手势关闭模态框会触发此回调。启用 allowSwipeDismissal 后，该回调将在模态框关闭后执行。

Type
function
Required
Android
TV
function
iOS

onShow​

onShow 属性接收的函数会在模态框显示后被调用。

Type
function

presentationStyle
iOS
​

presentationStyle 属性控制模态框的呈现方式（通常在 iPad 或 Plus 版 iPhone 等较大设备上生效）。详见 https://developer.apple.com/reference/uikit/uimodalpresentationstyle。

可选值：

  • fullScreen 完全覆盖屏幕

  • pageSheet 居中显示竖屏宽度视图（仅较大设备）

  • formSheet 居中显示窄宽度视图（仅较大设备）

  • overFullScreen 完全覆盖屏幕且允许透明效果

TypeDefault
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')fullScreen if transparent={false}
overFullScreen if transparent={true}

statusBarTranslucent
Android
​

statusBarTranslucent 属性决定模态框是否延伸到系统状态栏下方。

TypeDefault
boolfalse

supportedOrientations
iOS
​

supportedOrientations 属性允许模态框旋转至指定方向。在 iOS 上，模态框仍受限于应用 Info.plist 文件中 UISupportedInterfaceOrientations 字段的设定。

备注

在 iOS 上，当 presentationStyle 设置为 pageSheet 或 formSheet 时，此属性将被忽略。

TypeDefault
array of enums('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')['portrait']

transparent​

transparent 属性决定模态框是否填充整个视图。设为 true 时，模态框将在透明背景上渲染。

TypeDefault
boolfalse

visible​

visible 属性控制模态框是否可见。

TypeDefault
booltrue