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 属性。

¥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

backdropColor​

模态的 backdropColor（或模态容器的背景颜色）。如果未提供，则默认为 white 并且透明为 false。如果 transparent 是 true，则忽略。

¥The backdropColor of the modal (or background color of the modal's container.) Defaults to white if not provided and transparent is false. Ignored if transparent is true.

类型默认
colorwhite

hardwareAccelerated
Android
​

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

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

类型默认
boolfalse

navigationBarTranslucent prop 确定你的模式是否应位于系统导航栏下方。但是，还需要将 statusBarTranslucent 设置为 true 以使导航栏半透明。

¥The navigationBarTranslucent prop determines whether your modal should go under the system navigation bar. However, statusBarTranslucent also needs to be set to true to make navigation bar translucent.

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

allowSwipeDismissal
iOS
​

控制在 iOS 上是否可以通过向下滑动关闭模态框。这需要你实现 onRequestClose 属性来处理退出。

¥Controls whether the modal can be dismissed by swiping down on iOS. This requires you to implement the onRequestClose prop to handle the dismissal.

类型默认
boolfalse

ref​

一个引用设置器，在安装时将被分配 元素节点。

¥A ref setter that will be assigned an element node when mounted.

onRequestClose​

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

¥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. When allowSwipeDismissal is enabled this callback will be called after dismissing the modal.

类型
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 on 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