跳到主要内容

Modal

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

示例


参考

属性

View 属性

继承 View 属性


🗑️ animated

已弃用

请改用 animationType 属性。


animationType

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

可能的值:

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

backdropColor

模态框的 backdropColor(或模态框容器的背景颜色)。如果未提供且 transparent 为 false,则默认为 white。如果 transparenttrue,则忽略此属性。

类型默认值
颜色white

hardwareAccelerated
Android

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

类型默认值
布尔值false

navigationBarTranslucent 属性确定您的模态框是否应该位于系统导航栏下方。但是,还需要将 statusBarTranslucent 设置为 true 才能使导航栏半透明。

类型默认值
布尔值false

onDismiss
iOS

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

类型
函数

onOrientationChange
iOS

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

类型
函数

allowSwipeDismissal
iOS

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

类型默认值
布尔值false

ref

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


onRequestClose

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

类型
函数
必需
Android
TV

函数
iOS

onShow

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

类型
函数

presentationStyle
iOS

presentationStyle 属性控制模态框的外观(通常在 iPad 或 Plus 尺寸 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 属性确定您的模态框是否应该位于系统状态栏下方。

类型默认值
布尔值false

supportedOrientations
iOS

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

备注

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

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

transparent

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

类型默认值
布尔值false

visible

visible 属性确定您的模态框是否可见。

类型默认值
布尔值true