跳到主要内容
版本:0.85

Modal

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

示例


参考

属性

View Props

继承自 View Props


🗑️ animated

已弃用

请改用 animationType 属性。


animationType

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

可选值:

  • slide 从底部滑入
  • fade 淡入视图
  • none 不带动画地出现
TypeDefault
enum('none', 'slide', 'fade')none

backdropColor

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

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

挂载时会被赋值为一个 element node 的 ref 设置器。


onRequestClose

当用户在 Android 上按下硬件返回按钮,或在 Apple TV 上按下菜单按钮时,会调用 onRequestClose 回调。由于这是必需属性,只要模态框处于打开状态,就不会触发 BackHandler 事件。 在 iOS 上,当使用 presentationStylepageSheetformSheet 的拖拽手势关闭 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 完全覆盖屏幕,但允许透明
TypeDefault
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')fullScreen if transparent={false}
overFullScreen if transparent={true}

statusBarTranslucent
Android

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

TypeDefault
boolfalse

supportedOrientations
iOS

supportedOrientations 属性允许模态框旋转到指定的任意方向。在 iOS 上,模态框仍会受到应用 Info.plistUISupportedInterfaceOrientations 字段的限制。

备注

当使用 pageSheetformSheetpresentationStyle 时,此属性在 iOS 上会被忽略。

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

transparent

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

TypeDefault
boolfalse

visible

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

TypeDefault
booltrue