React Native 中文 - Modal 组件 - React Native 中文文档

Modal 组件提供了一种覆盖在其它视图之上显示内容的简单方法。也就是常常会用到的模态对话框

提示

如果 Modal 组件不能满足你的定制需求，或者你需要更多地控制如何在应用程序的其余部分上显示模态框，那么建议你使用 根导航器 「 Navigator 」。

译者解释 上面这句话什么意思呢？以我多年的经验，其实就是参考 HTML 中的办法，在所有视图的顶部自己定义一个模态框（为什么要顶部呢？因为 React Native 没有 z-index 的实际概念，没法把后面的视图显示在其它视图之上）。

范例

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} 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.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>
    );
  }
}

注意事项

iOS 或者 Android 中，同一时间只能显示一个 Modal 组件。也就是说，只要有一个 Modal 的属性 visible={true} ，那么，再设置另一个 Modal 的 visible={true} 就会报错。

因此，不建议不可控的是用 Modal

导入组件

import {Modal} from 'react-native';

属性

属性	必填	平台	说明
visible	否	iOS,Android	是否显示 Modal
supportedOrientations	否	iOS	指定在设备切换横竖屏方向时，modal 会在哪些屏幕朝向下跟随旋转
onRequestClose	是	iOS,Android	用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发
onShow	否	iOS,Android	在 modal 显示时调用
transparent	否	iOS,Android	背景是否透明，默认不透明且为白色
animationType	否	iOS,Android	modal 显示或消失时的动画类型
hardwareAccelerated	否	Android	是否强制启用硬件加速来绘制弹出层
onDismiss	否	iOS	modal 被关闭时调用
onOrientationChange)	否	iOS	模态窗显示的时候，当设备方向发生更改时调用
presentationStyle	否	iOS	modal（在较大屏幕的设备比如 iPad 或是 Plus 机型）如何展现
animated ^已废弃	否	iOS,Android	modal 显示或消失时的动画类型