跳到主要内容

Modal

Modal 组件是一种在封闭视图上方呈现内容的基本方式。

示例


参考

属性

视图属性

继承自 View 属性


animated

已弃用

请改用 animationType 属性。


animationType

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

可能的值

  • slide 从底部滑入
  • fade 逐渐淡入
  • none 不带动画出现
类型默认
枚举值('none', 'slide', 'fade')

backdropColor

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

类型默认
颜色白色

hardwareAccelerated
Android

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

类型默认
布尔值false

navigationBarTranslucent 属性决定您的 Modal 是否应该位于系统导航栏下方。但是,statusBarTranslucent 也需要设置为 true 才能使导航栏半透明。

类型默认
布尔值false

onDismiss
iOS

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

类型
函数

onOrientationChange
iOS

当 Modal 显示期间方向发生变化时,将调用 onOrientationChange 回调。提供的方向仅为“portrait”或“landscape”。无论当前方向如何,在初始渲染时也会调用此回调。

类型
函数

allowSwipeDismissal
iOS

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

类型默认
布尔值false

ref

一个 ref 设置器,在挂载时将被分配一个元素节点


onRequestClose

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

类型
函数
必需
Android
电视

函数
iOS

onShow

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

类型
函数

presentationStyle
iOS

presentationStyle 属性控制 Modal 的显示方式(通常在 iPad 或 Plus 尺寸 iPhone 等大型设备上)。有关详细信息,请参阅 https://developer.apple.com/reference/uikit/uimodalpresentationstyle

可能的值

  • fullScreen 完全覆盖屏幕
  • pageSheet 覆盖居中的纵向宽度视图(仅在大型设备上)
  • formSheet 覆盖居中的窄宽度视图(仅在大型设备上)
  • overFullScreen 完全覆盖屏幕,但允许透明
类型默认
枚举值('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')如果 transparent={false} 则为 fullScreen
如果 transparent={true} 则为 overFullScreen

statusBarTranslucent
Android

statusBarTranslucent 属性决定您的 Modal 是否应该位于系统状态栏下方。

类型默认
布尔值false

supportedOrientations
iOS

supportedOrientations 属性允许 Modal 旋转到任何指定的方向。在 iOS 上,Modal 仍然受到您的应用程序 Info.plist 的 UISupportedInterfaceOrientations 字段中指定内容的限制。

注意

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

类型默认
枚举数组('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')['portrait']

transparent

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

类型默认
布尔值false

visible

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

类型默认
布尔值true