参考文档

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

查看 Props

属性	类型	必填	描述
visible	bool	否	visible属性决定 modal 是否显示。
supportedOrientations	array of enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')	否	(ios平台)supportedOrientations用于指定在设备切换横竖屏方向时，modal 会在哪些屏幕朝向下跟随旋转。在 iOS 上，除了本属性外，还会受到应用的 Info.plist 文件中UISupportedInterfaceOrientations的限制。如果还设置了presentationStyle属性为pageSheet或formSheet，则在 iOS 上本属性将被忽略。
onRequestClose	function	Android, Platform.isTVOS必填，其它平台非必填	onRequestClose回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必填，且会在 modal 处于开启状态时阻止BackHandler事件。
onShow	function	否	onShow回调函数会在 modal 显示时调用。
transparent	bool	否	transparent 属性是指背景是否透明，默认为白色，将这个属性设为：true 的时候弹出一个透明背景层的 modal。
animationType	enum('none', 'slide', 'fade')	否	animationType指定了 modal 的动画类型。 slide 从底部滑入滑出。 fade 淡入淡出。 none 没有动画，直接蹦出来。默认值为none /th>
hardwareAccelerated	bool	否	hardwareAccelerated属性决定是否强制启用硬件加速来绘制弹出层。（Android）
statusBarTranslucent	bool	否	statusBarTranslucent道具确定您的模态是否应位于系统状态栏下。（Android）
onDismiss	function	否	onDismiss回调会在 modal 被关闭时调用。（ios）
onOrientationChange	function	否	模态窗显示的时候，当设备方向发生更改时，将调用onOrientationChange回调方法。提供的设备方向仅为“竖屏”或“横屏”。无论当前方向如何，也会在初始渲染时调用此回调方法。（ios）
presentationStyle	enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')	否	presentationStyle决定 modal（在较大屏幕的设备比如 iPad 或是 Plus 机型）如何展现。更多细节请参阅https://developer.apple.com/reference/uikit/uimodalpresentationstyle。 fullScreen完全盖满屏幕。 pageSheet竖直方向几乎盖满，水平居中，左右留出一定空白（仅用于大屏设备）。 formSheet竖直和水平都居中，四周都留出一定空白（仅用于大屏设备）。 overFullScreen完全盖满屏幕，同时允许透明。默认会根据transparent属性而设置为overFullScreen或是fullScreen。

Example

示例

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

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

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

  render() {
    const { modalVisible } = this.state;
    return (
      <View style={styles.centeredView}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            Alert.alert("Modal has been closed.");
          }}
        >
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text style={styles.modalText}>Hello World!</Text>

              <TouchableHighlight
                style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                onPress={() => {
                  this.setModalVisible(!modalVisible);
                }}
              >
                <Text style={styles.textStyle}>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

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

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  },
  openButton: {
    backgroundColor: "#F194FF",
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

results matching ""

No results matching ""