跳到主要内容
版本：0.80

Modal

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

示例​

参考

属性​

View Props​

继承自 View Props。

animated​

已弃用。 请改用 animationType 属性。

animationType​

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

可选值：

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

backdropColor​

Modal 的 backdropColor（或 modal 容器的背景色）。如果未提供且 transparent 为 false，默认是 white。如果 transparent 为 true，则会被忽略。

TypeDefault
colorwhite

hardwareAccelerated
Android
​

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

TypeDefault
boolfalse

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

TypeDefault
boolfalse

onDismiss
iOS
​

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

Type
function

onOrientationChange
iOS
​

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

Type
function

onRequestClose​

当用户在 Android 上点击硬件返回按钮，或在 Apple TV 上点击菜单按钮时，会调用 onRequestClose 回调。因此，由于这是必需属性，请注意只要 modal 处于打开状态，BackHandler 事件就不会被触发。 在 iOS 上，当使用 presentationStyle 为 pageSheet 或 formSheet 的情况下通过拖拽手势关闭 Modal 时，会调用此回调

Type
function
Required
Android
TV
function
iOS

onShow​

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

Type
function

presentationStyle
iOS
​

presentationStyle 属性控制 modal 的显示方式（通常用于 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 属性决定你的 modal 是否应该显示在系统状态栏之下。

TypeDefault
boolfalse

supportedOrientations
iOS
​

supportedOrientations 属性允许 modal 旋转到所指定的任意方向。在 iOS 上，modal 仍然会受到应用的 Info.plist 中 UISupportedInterfaceOrientations 字段的限制。

当 presentationStyle 使用 pageSheet 或 formSheet 时，iOS 会忽略此属性。

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

transparent​

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

TypeDefault
boolfalse

visible​

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

TypeDefault
booltrue