跳到主要内容

Modal

Modal 组件是一种在封闭视图之上展示内容的基础方式。

示例


参考

属性

View Props

继承 View Props


🗑️ animated

已弃用

请改用 animationType 属性。


animationType

animationType 属性控制模态框的动画方式。

可能的值:

  • slide 从底部滑入
  • fade 淡入显示
  • none 不带动画显示
类型默认值
enum('none', 'slide', 'fade')none

backdropColor

模态框的 backdropColor(或模态框容器的背景色)。如果未提供且 transparentfalse,默认值为 white。如果 transparenttrue,则忽略此项。

类型默认值
colorwhite

hardwareAccelerated
Android

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

类型默认值
boolfalse

navigationBarTranslucent 属性决定模态框是否应显示在系统导航栏下方。不过,要使导航栏透明,还需要将 statusBarTranslucent 设为 true

类型默认值
boolfalse

onDismiss
iOS

onDismiss 属性允许传入一个函数,该函数会在模态框被关闭后调用。

类型
function

onOrientationChange
iOS

当模态框显示期间方向发生变化时,会调用 onOrientationChange 回调。提供的方向仅为 'portrait''landscape'。无论当前方向如何,在初始渲染时也会调用此回调。

类型
function

allowSwipeDismissal
iOS

控制在 iOS 上是否可以通过向下滑动来关闭模态框。 这要求你实现 onRequestClose 属性来处理关闭逻辑。

类型默认值
boolfalse

ref

挂载时会被分配为 element node 的 ref setter。


onRequestClose

当用户在 Android 上点击硬件返回按钮或在 Apple TV 上点击菜单按钮时,会调用 onRequestClose 回调。由于这是必需的属性,请注意,只要模态框处于打开状态,BackHandler 事件就不会被触发。 在 iOS 上,当使用 presentationStylepageSheetformSheet 的 Modal 通过拖拽手势被关闭时,会调用此回调。当启用 allowSwipeDismissal 时,关闭模态框后也会调用此回调。

类型
function
必需
Android
TV

function
iOS

onShow

onShow 属性允许传入一个函数,该函数会在模态框显示后调用。

类型
function

presentationStyle
iOS

presentationStyle 属性控制模态框的显示方式(通常用于 iPad 或大屏 iPhone 等较大设备)。详情请参见 https://developer.apple.com/reference/uikit/uimodalpresentationstyle。

可能的值:

  • fullScreen 完全覆盖屏幕
  • pageSheet 以居中的纵向宽度视图覆盖(仅在较大设备上)
  • formSheet 以居中的窄宽度视图覆盖(仅在较大设备上)
  • overFullScreen 完全覆盖屏幕,但允许透明
类型默认值
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')transparent={false} 时为 fullScreen
transparent={true} 时为 overFullScreen

statusBarTranslucent
Android

statusBarTranslucent 属性决定模态框是否应显示在系统状态栏下方。

类型默认值
boolfalse

supportedOrientations
iOS

supportedOrientations 属性允许模态框旋转到所指定的任意方向。在 iOS 上,模态框仍然受应用的 Info.plist 中 UISupportedInterfaceOrientations 字段所指定内容的限制。

备注

当使用 presentationStylepageSheetformSheet 时,此属性在 iOS 上将被忽略。

类型默认值
array of enums('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')['portrait']

transparent

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

类型默认值
boolfalse

visible

visible 属性决定模态框是否可见。

类型默认值
booltrue