跳到主要内容

Modal

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

示例​

参考文档

Props​

View Props​

继承 View Props。

🗑️ animated​

已弃用

请改用 animationType 属性。

animationType​

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

可选值：

  • slide 从底部滑入
  • fade 淡入显示
  • none 无动画直接出现
类型默认值
enum('none', 'slide', 'fade')none

backdropColor​

模态框的背景色（即模态框容器的背景颜色）。如果未提供且 transparent 为 false，则默认为 white。当 transparent 为 true 时此属性被忽略。

类型默认值
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​

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

onRequestClose​

onRequestClose 回调会在用户按下 Android 上的硬件返回键或 Apple TV 上的菜单键时被调用。由于这是一个必需的属性，请注意只要模态框处于打开状态，BackHandler 事件就不会被触发。 在 iOS 上，当使用 pageSheet 或 formSheet 的 presentationStyle 并通过拖拽手势关闭模态框时，也会调用此回调。当启用了 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 字段所指定方向的限制。

note

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

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

transparent​

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

类型默认值
boolfalse

visible​

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

类型默认值
booltrue