Skip to main content

Modal

Modal 组件是在封闭视图上方渲染内容的基本方式。

¥The Modal component is a basic way to present content above an enclosing view.

示例​

¥Example

参考

¥Reference

属性​

¥Props

视图属性​

¥View Props

继承 视图属性。

¥Inherits View Props.

animated​

已弃用。请改用 animationType 属性。

¥Deprecated. Use the animationType prop instead.

animationType​

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

¥The animationType prop controls how the modal animates.

可能的值：

¥Possible values:

  • slide 从底部滑入，

    ¥slide slides in from the bottom,

  • fade 逐渐消失在视野中，

    ¥fade fades into view,

  • none 出现时没有动画。

    ¥none appears without an animation.

类型默认
enum('none', 'slide', 'fade')none

hardwareAccelerated
Android
​

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

¥The hardwareAccelerated prop controls whether to force hardware acceleration for the underlying window.

类型默认
boolfalse

onDismiss
iOS
​

onDismiss 属性允许传递一个函数，该函数将在模态被关闭后被调用。

¥The onDismiss prop allows passing a function that will be called once the modal has been dismissed.

类型
function

onOrientationChange
iOS
​

当模式显示时方向发生变化时，会调用 onOrientationChange 回调。提供的方向仅为 'portrait' 或 'landscape'。无论当前方向如何，该回调也会在初始渲染时调用。

¥The onOrientationChange callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.

类型
function

onRequestClose​

当用户点击 Android 上的硬件后退按钮或 Apple TV 上的菜单按钮时，将调用 onRequestClose 回调。由于这个必需的属性，请注意，只要模式打开，就不会发出 BackHandler 事件。在 iOS 上，当 presentationStyle 为 pageSheet or formSheet 时使用拖动手势关闭 Modal 时，会调用此回调

¥The onRequestClose callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that BackHandler events will not be emitted as long as the modal is open. On iOS, this callback is called when a Modal is being dismissed using a drag gesture when presentationStyle is pageSheet or formSheet

类型
function
必需
Android
TV
function
iOS

onShow​

onShow 属性允许传递一个函数，该函数将在模态显示后被调用。

¥The onShow prop allows passing a function that will be called once the modal has been shown.

类型
function

presentationStyle
iOS
​

presentationStyle 属性控制模式的显示方式（通常在 iPad 或大号 iPhone 等较大设备上）。详情请参见 https://developer.apple.com/reference/uikit/uimodalpresentationstyle。

¥The presentationStyle prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.

可能的值：

¥Possible values:

  • fullScreen 完全覆盖屏幕

    ¥fullScreen covers the screen completely

  • pageSheet 覆盖居中的纵向宽度视图（仅在较大的设备上）

    ¥pageSheet covers portrait-width view centered (only on larger devices)

  • formSheet 覆盖居中的窄宽度视图（仅在较大的设备上）

    ¥formSheet covers narrow-width view centered (only on larger devices)

  • overFullScreen 完全覆盖屏幕，但允许透明

    ¥overFullScreen covers the screen completely, but allows transparency

类型默认
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')fullScreen 如果 transparent={false}
overFullScreen 如果 transparent={true}

statusBarTranslucent
Android
​

statusBarTranslucent 属性决定你的模式是否应位于系统状态栏下方。

¥The statusBarTranslucent prop determines whether your modal should go under the system statusbar.

类型默认
boolfalse

supportedOrientations
iOS
​

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

¥The supportedOrientations prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.

当使用 presentationStyle 或 pageSheet 或 formSheet 时，该属性将被 iOS 忽略。

¥When using presentationStyle of pageSheet or formSheet, this property will be ignored by iOS.

类型默认
枚举数组（'portrait'、'portrait-upside-down'、'landscape'、'landscape-left'、'landscape-right'）['portrait']

transparent​

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

¥The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.

类型默认
boolfalse

visible​

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

¥The visible prop determines whether your modal is visible.

类型默认
booltrue