Modal
Modal 组件是在封闭视图上方渲染内容的基本方式。
¥The Modal component is a basic way to present content above an enclosing view.
示例
¥Example
参考
¥Reference
属性
¥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 |
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
.
类型 | 默认 |
---|---|
color | white |
hardwareAccelerated
Android
hardwareAccelerated
属性控制是否强制底层窗口的硬件加速。
¥The hardwareAccelerated
prop controls whether to force hardware acceleration for the underlying window.
类型 | 默认 |
---|---|
bool | false |
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.
类型 | 默认 |
---|---|
bool | false |
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
ofpageSheet
orformSheet
, 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.
类型 | 默认 |
---|---|
bool | false |
visible
visible
属性决定你的模态是否可见。
¥The visible
prop determines whether your modal is visible.
类型 | 默认 |
---|---|
bool | true |