Q群 567530369,小伙伴们都在这里等你哦~

Modal

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属性为pageSheetformSheet,则在 iOS 上本属性将被忽略。

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

onRequestClose

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

类型必填平台
functionAndroid, Platform.isTVOS
function(Others)

onShow

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

类型必填
function

transparent

transparent 属性是指背景是否透明,默认为白色,将这个属性设为:true 的时候弹出一个透明背景层的modal。

类型必填
bool

animationType

animationType指定了 modal 的动画类型。

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

默认值为none

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

hardwareAccelerated

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

类型必填平台
boolAndroid

onDismiss

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

类型必填平台
functioniOS

onOrientationChange

模态窗显示的时候,当设备方向发生更改时,将调用onOrientationChange回调方法。 提供的设备方向仅为“竖屏”或“横屏”。 无论当前方向如何,也会在初始渲染时调用此回调方法。

类型必填平台
functioniOS

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