0.55

帮助改进此文档

Modal

本文档贡献者：sunnylqm(100.00%)

Modal 组件是一种简单的覆盖在其他视图之上显示内容的方式。

import React, { Component } from "react";
import { Modal, Text, TouchableHighlight, View } from "react-native";

class ModalExample extends Component {
  state = {
    modalVisible: false
  };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
    return (
      <View style={{ marginTop: 22 }}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            alert("Modal has been closed.");
          }}
        >
          <View style={{ marginTop: 22 }}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}
              >
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}
        >
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

查看 Props

文档

Props

visible

visible属性决定 modal 是否显示。

类型必填
bool否

supportedOrientations

supportedOrientations用于指定在设备切换横竖屏方向时，modal 会在哪些屏幕朝向下跟随旋转。在 iOS 上，除了本属性外，还会受到应用的 Info.plist 文件中UISupportedInterfaceOrientations的限制。如果还设置了presentationStyle属性为pageSheet或formSheet，则在 iOS 上本属性将被忽略。

类型必填平台
array of enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')否iOS

onRequestClose

onRequestClose回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必填，且会在 modal 处于开启状态时阻止BackHandler事件。

类型必填平台
function是Android, Platform.isTVOS
function否(Others)

onShow

onShow回调函数会在 modal 显示时调用。

类型必填
function否

transparent

transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.

类型必填
bool否

animationType

animationType指定了 modal 的动画类型。

  • slide 从底部滑入滑出。
  • fade 淡入淡出。
  • none 没有动画，直接蹦出来。

默认值为none。

类型必填
enum('none', 'slide', 'fade')否

hardwareAccelerated

hardwareAccelerated属性决定是否强制启用硬件加速来绘制弹出层。

类型必填平台
bool否Android

onDismiss

onDismiss回调会在 modal 被关闭时调用。

类型必填平台
function否iOS

onOrientationChange

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否iOS

presentationStyle

presentationStyle决定 modal（在较大屏幕的设备比如 iPad 或是 Plus 机型）如何展现。更多细节请参阅https://developer.apple.com/reference/uikit/uimodalpresentationstyle。

  • fullScreen完全盖满屏幕。
  • pageSheet竖直方向几乎盖满，水平居中，左右留出一定空白（仅用于大屏设备）。
  • formSheet竖直和水平都居中，四周都留出一定空白（仅用于大屏设备）。
  • overFullScreen完全盖满屏幕，同时允许透明。

默认会根据transparent属性而设置为overFullScreen或是fullScreen。

类型必填平台
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')否iOS
← PreviousNext →