React Native 其他组件之 Modal

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

属性

名称	类型	平台	说明
visible	bool		visible属性决定 modal 是否显示。
supportedOrientations	array of enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')	iOS	用于指定在设备切换横竖屏方向时，modal 会在哪些屏幕朝向下跟随旋转。
onRequestClose	function		回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。Android平台必填
onShow	function		回调函数会在 modal 显示时调用。
transparent	bool		属性是指背景是否透明，默认为白色.
animationType	enum('none', 'slide', 'fade')		指定了 modal 的动画类型。
hardwareAccelerated	bool	Android	决定是否强制启用硬件加速来绘制弹出层。
onDismiss	function	iOS	回调会在 modal 被关闭时调用。
onOrientationChange	function	iOS	无论当前方向如何，也会在初始渲染时调用此回调方法。
presentationStyle	enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')	iOS	决定 modal（在较大屏幕的设备比如 iPad 或是 Plus 机型）如何展现。

实例

1. 逻辑代码

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

export default class App extends Component { 
  state = {
    modalVisible: false
  };
  setModalVisible(visible) { 
    this.setState({
      modalVisible: visible
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Modal
          animationType='slide'
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            alert('modal has been closed.');
          }}
        >
          < View style = {
            styles.container
          } >
            <View>
              <Text style = {styles.text}>Hello Modal!</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>
    )
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingHorizontal: 20,
    paddingTop:20
  },

  text: {
    fontSize: 20
  }
  
});

2. 效果图

modal01.jpg modal02.jpg