跳到主要内容
版本:0.83

Modal

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

示例


参考

属性

View 属性

继承自 View 属性


🗑️ animated

已弃用

请改用 animationType 属性。


animationType

animationType 属性控制 Modal 的动画方式。

可选值:

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

backdropColor

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

类型默认值
colorwhite

hardwareAccelerated
Android

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

类型默认值
boolfalse

navigationBarTranslucent 属性决定你的 Modal 是否应显示在系统导航栏下方。不过,还需要将 statusBarTranslucent 设为 true 才能让导航栏透明。

类型默认值
boolfalse

onDismiss
iOS

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

类型
function

onOrientationChange
iOS

当 Modal 显示时发生方向变化,onOrientationChange 回调会被调用。提供的方向仅为 'portrait''landscape'。无论当前方向如何,此回调也会在首次渲染时调用。

类型
function

allowSwipeDismissal
iOS

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

类型默认值
boolfalse

ref

挂载时会被赋值为一个 元素节点 的 ref setter。


onRequestClose

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

类型
function
必需
Android
TV

function
iOS

onShow

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

类型
function

presentationStyle
iOS

presentationStyle 属性控制 Modal 的呈现方式(通常在 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 属性决定你的 Modal 是否应显示在系统状态栏下方。

类型默认值
boolfalse

supportedOrientations
iOS

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

备注

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

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

transparent

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

类型默认值
boolfalse

visible

visible 属性决定你的 Modal 是否可见。

类型默认值
booltrue