（友情提示：RN學習，從最基礎的開始，大家不要嫌棄太基礎，會的同學請自行略過，希望不要耽誤已經會的同學的寶貴時間）

Modal是模態檢視，它的作用是可以用來覆蓋 React Native中根檢視的原生檢視，Modal模態檢視是一種覆蓋包圍當前內容檢視的一個簡單方法。

注意：如果你需要如何在您的應用程式的其餘部分呈現模態的更多控制，那麼可以考慮使用頂級導航（top-level Navigator）。

Modal 屬性

照例，我想大家都知道我的習慣了，畢竟官網也是這個順序，那就是在用人之前，先要了解人，畢竟疑人不用，用人不疑嘛，要想相信一個人，首先得了解一個人嘛。來，看看 Modal 的相關屬性。

• animated bool 是否有動畫效果，不過這個屬性已經被拋棄了，取之代替的是：animationType
• animationType (['none', 'slide', 'fade']) 這個animationType屬性作用就是如何控制模態動畫，有一下三個型別：
  • none 出現的時候不帶動畫效果
  • fade 帶有淡入動畫的效果
  • slide 從底部滑動出來的動畫效果
• onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func 這是一個 Android 平臺需要的屬性，它的作用是當這個模態檢視取消或者關閉消失的時候回撥這個函式
• onShow function 當模態檢視顯示的時候呼叫此函式
• transparent bool 布林值，是否透明，true 將使得在一個透明背景的模式
• visible bool 布林值，是否可見
• onOrientationChange func ios 當在顯示模態的方向變化時回撥此函式
• supportedOrientations ios (['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']))

例項演示

來，我們大家一起看看這個效果的實現，看完效果就更加直觀的能夠感受到這個元件的作用和功能了。動態效果圖如下：

例項程式碼

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

class Button extends Component {
  state = {
    active: false,
  };

  _onHighlight = () => {
    this.setState({active: true});
  };

  _onUnhighlight = () => {
    this.setState({active: false});
  };

  render() {
    var colorStyle = {
      color: this.state.active ? '#fff' : '#000',
    };
    return (
      <TouchableHighlight
        onHideUnderlay={this._onUnhighlight}
        onPress={this.props.onPress}
        onShowUnderlay={this._onHighlight}
        style={[styles.button, this.props.style]}
        underlayColor="#a9d9d4">
          <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
      </TouchableHighlight>
    );
  }
}

export default class ModalDemo extends Component {
  state = {
    animationType: 'none',
    modalVisible: false,
    transparent: false,
  };

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

  _setAnimationType = (type) => {
    this.setState({animationType: type});
  };

  _toggleTransparent = () => {
    this.setState({transparent: !this.state.transparent});
  };
  render() {
     var modalBackgroundStyle = {
      backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
    };
    var innerContainerTransparentStyle = this.state.transparent
      ? {backgroundColor: '#fff', padding: 20}
      : null;
    var activeButtonStyle = {
      backgroundColor: '#ddd'
    };
    return (
       <View>
        <Modal
          animationType={this.state.animationType}
          transparent={this.state.transparent}
          visible={this.state.modalVisible}
          onRequestClose={() => this._setModalVisible(false)}
          >
          <View style={[styles.container, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
              <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
              <Button
                onPress={this._setModalVisible.bind(this, false)}
                style={styles.modalButton}>
                Close
              </Button>
            </View>
          </View>
        </Modal>
        <View style={styles.row}>
          <Text style={styles.rowTitle}>Animation Type</Text>
          <Button onPress={this._setAnimationType.bind(this, 'none')} style={this.state.animationType === 'none' ? activeButtonStyle : {}}>
            none
          </Button>
          <Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? activeButtonStyle : {}}>
            slide
          </Button>
          <Button onPress={this._setAnimationType.bind(this, 'fade')} style={this.state.animationType === 'fade' ? activeButtonStyle : {}}>
            fade
          </Button>
        </View>

        <View style={{marginTop:50,flexDirection: 'row',alignItems: 'center',justifyContent: 'center'}}>
          <Text style={{color:'grey',fontWeight: 'bold',marginRight:20}}>Transparent</Text>
          <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
        </View>

        <Button onPress={this._setModalVisible.bind(this, true)}>
          Present
        </Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
 container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  innerContainer: {
    borderRadius: 10,
    alignItems: 'center',
  },
  row: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
    marginBottom: 20,
  },
  rowTitle: {
    flex: 1,
    fontWeight: 'bold',
  },
  button: {
    borderRadius: 5,
    flex: 1,
    height: 44,
    alignSelf: 'stretch',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  buttonText: {
    fontSize: 18,
    margin: 5,
    textAlign: 'center',
  },
  modalButton: {
    marginTop: 10,
  },
  pickerItem: {
    fontSize: 16,
  },
});

AppRegistry.registerComponent('ModalDemo', () => ModalDemo);

這個例子內容比較多，大家仔細看看，最好動手實踐一下，這樣才能掌握的更加熟練。