（友情提示：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 (
   
   
   
    {this.props.children}
    
  
  );
 }
 }
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 (
    
   
   
     this._setModalVisible(false)} > 
     
      
      
       This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.
       
       Close  
      
     
    
    
    
     Animation Type
     
     none  
     slide  
     fade  
    
    
    
     Transparent
     
     
    
    
    Present  
  
  );
 }
 }
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);

这个例子内容比较多，大家仔细看看，最好动手实践一下，这样才能掌握的更加熟练。

由于代码太多，可能阅读代码不是很方便，想要方便的看代码可以点击阅读原文，去博客直接阅读。

特别说明：React Native系列文章，已经发布的我都给大家整理到了一篇索引文章中，方便大家以后集中学习。点击非著名程序员公众号里菜单中的干货资料—>RN 教程即可获得。