跳到主要内容

Modal

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

示例​

参考

Props​

View Props​

继承 View Props。

animationType​

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

可能的值：

  • slide 从底部滑入
  • fade 淡入视图
  • none 无动画显示
TypeDefault
enum（'none'、'slide'、'fade'）none

backdropColor​

模态框的 backdropColor（或模态框容器的背景色）。如果未提供且 transparent 为 false，则默认为 white。如果 transparent 为 true，则会忽略此属性。

TypeDefault
colorwhite

hardwareAccelerated
Android
​

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

TypeDefault
boolfalse

navigationBarTranslucent 属性决定模态框是否应延伸到系统导航栏下方。不过，还需要将 statusBarTranslucent 设置为 true，才能使导航栏变为半透明。

TypeDefault
boolfalse

onDismiss
iOS
​

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

Type
function

onOrientationChange
iOS
​

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

Type
function

allowSwipeDismissal
iOS
​

控制是否可以在 iOS 上向下滑动关闭模态框。 这要求你实现 onRequestClose 属性来处理关闭操作。

TypeDefault
boolfalse

ref​

一个 ref setter，在挂载时会被分配一个 element node。

onRequestClose​

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

Type
function
Required
Android
TV
function
iOS

onShow​

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

Type
function

presentationStyle
iOS
​

presentationStyle 属性控制模态框的显示方式（通常适用于 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 属性决定模态框是否应延伸到系统状态栏下方。

TypeDefault
boolfalse

supportedOrientations
iOS
​

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

备注

在 iOS 上使用 presentationStyle 的 pageSheet 或 formSheet 时，此属性会被忽略。

TypeDefault
array of enums（'portrait'、'portrait-upside-down'、'landscape'、'landscape-left'、'landscape-right'）['portrait']

transparent​

transparent 属性决定模态框是否填充整个视图。将其设置为 true 会使模态框以透明背景呈现。

TypeDefault
boolfalse

visible​

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

TypeDefault
booltrue