React Native 中文 - Modal 组件

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 显示或消失时的动画类型

React Native 中文文档

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.