前言

最近在项目中的RN模块遇到一个需求，弹出一个Dialog,但是原生的Alert满足不了需求，只能自己去写一个，最后决定使用Modal去实现，话不多说，介绍开始,效果图如下：
这里写图片描述

1.Modal介绍

Modal视图在iOS原生开发中熟称:"模态视图",Modal进行封装之后，可以弹出来覆盖包含React Native跟视图的原生界面(例如:UiViewControllView,Activity)。在使用React Native开发的混合应用中使用Modal组件，该可以让你使用RN开发的内功呈现在原生视图的上面。属性:1.animationType enum('none', 'slide', 'fade') 动画类型  可选项为：none、slide、fade2.onRequestClose function Android系统必须实现的方法  当modal隐藏时触发3.onShow function    显示完回调方法4.transparent bool 是否透明，默认不透明5.visible  bool modal状态，隐藏还是显示

2.实现

在此是将modal封装成为一个组件以便后续在别的地方引用。组件ModalDialog.js代码如下

/** * Created by peixuan.xie on 2017/2/28. */import React, { Component } from 'react';import {    Modal,    Text,    TouchableHighlight,    View ,    StyleSheet,    BackAndroid} from 'react-native';let Dimensions = require('Dimensions');let SCREEN_WIDTH = Dimensions.get('window').width;//宽let SCREEN_HEIGHT = Dimensions.get('window').height;//高export default class ModalDialog extends Component {
       // 构造    constructor(props) {        super(props);    }    static propTypes = {        _dialogTitle: React.PropTypes.string, //标题        _dialogContent: React.PropTypes.string, //内容        _dialogLeftBtnTitle: React.PropTypes.string,    //左按键标题        _dialogRightBtnTitle: React.PropTypes.string,   //右按键标题        _dialogLeftBtnAction: React.PropTypes.func.isRequired,  //左点击方法        _dialogRightBtnAction: React.PropTypes.func.isRequired, //右点击方法        _dialogVisible: React.PropTypes.bool,       //显示还是隐藏    }    static defaultProps = {        _dialogTitle: '温馨提示',        _dialogContent: '是否退出',        _dialogLeftBtnTitle: '取消',        _dialogRightBtnTitle: '确定',        _dialogVisible: false,    }    render() {        // onPress事件直接与父组件传递进来的属性挂接        return (            
   
     {}} //如果是Android设备 必须有此方法                >                
                        
                             
                                  
       
                                        {
  this.props._dialogTitle}                            
                               
                              
                                  
       
                                        {
  this.props._dialogContent}                            
                               
                              
                                  
                                       
        
          { this.props._dialogLeftBtnTitle} 
                                    
                                   
                                       
        
          { this.props._dialogRightBtnTitle} 
                                    
                               
                          
                     
                
           );    }}const styles = StyleSheet.create({    bg: {  //全屏显示 半透明 可以看到之前的控件但是不能操作了        width: SCREEN_WIDTH,        height: SCREEN_HEIGHT,        backgroundColor: 'rgba(52,52,52,0.5)',  //rgba  a0-1  其余都是16进制数        justifyContent: 'center',        alignItems: 'center',    },    dialog: {        width: SCREEN_WIDTH * 0.8,        height: SCREEN_HEIGHT * 0.28,        backgroundColor: 'white',        borderRadius: 8,    },    dialogTitleView: {        width: SCREEN_WIDTH * 0.8,        height: SCREEN_HEIGHT * 0.08,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#EEEEEE',        borderTopLeftRadius: 8,        borderTopRightRadius: 8    },    dialogTitle: {        textAlign: 'center',        fontSize: 18,        color: '#000000',    },    dialogContentView: {        width: SCREEN_WIDTH * 0.8,        height: SCREEN_HEIGHT * 0.12,        justifyContent: 'center',        alignItems: 'center',    },    dialogContent: {        textAlign: 'center',        fontSize: 16,        color: '#4A4A4A',    },    dialogBtnView: {        width: SCREEN_WIDTH * 0.8,        height: SCREEN_HEIGHT * 0.08,        flexDirection: 'row',    },    dialogBtnViewItem: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#E5F2FF',        borderBottomLeftRadius: 8,        borderBottomRightRadius: 8,    },    leftButton: {        fontSize: 18,        color: '#007AFF',        borderBottomLeftRadius: 8,    },    rightButton: {        fontSize: 18,        color: '#007AFF',        borderBottomRightRadius: 8,    }}); 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53 
  54 
  55 
  56 
  57 
  58 
  59 
  60 
  61 
  62 
  63 
  64 
  65 
  66 
  67 
  68 
  69 
  70 
  71 
  72 
  73 
  74 
  75 
  76 
  77 
  78 
  79 
  80 
  81 
  82 
  83 
  84 
  85 
  86 
  87 
  88 
  89 
  90 
  91 
  92 
  93 
  94 
  95 
  96 
  97 
  98 
  99 
  100 
  101 
  102 
  103 
  104 
  105 
  106 
  107 
  108 
  109 
  110 
  111 
  112 
  113 
  114 
  115 
  116 
  117 
  118 
  119 
  120 
  121 
  122 
  123 
  124 
  125 
  126 
  127 
  128 
  129 
  130 
  131 
  132 
  133 
  134 
  135 
  136 
  137 
  138 
  139 
  140 
  141 
  142 
  143 
  144 
  145 
  146 
  147 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53 
  54 
  55 
  56 
  57 
  58 
  59 
  60 
  61 
  62 
  63 
  64 
  65 
  66 
  67 
  68 
  69 
  70 
  71 
  72 
  73 
  74 
  75 
  76 
  77 
  78 
  79 
  80 
  81 
  82 
  83 
  84 
  85 
  86 
  87 
  88 
  89 
  90 
  91 
  92 
  93 
  94 
  95 
  96 
  97 
  98 
  99 
  100 
  101 
  102 
  103 
  104 
  105 
  106 
  107 
  108 
  109 
  110 
  111 
  112 
  113 
  114 
  115 
  116 
  117 
  118 
  119 
  120 
  121 
  122 
  123 
  124 
  125 
  126 
  127 
  128 
  129 
  130 
  131 
  132 
  133 
  134 
  135 
  136 
  137 
  138 
  139 
  140 
  141 
  142 
  143 
  144 
  145 
  146 
  147

调用代码如下：
ModalDialog.js

/** * Created by peixuan.xie on 2017/2/28. */import React,{Component} from 'react';import {    Modal,    Text,    TouchableOpacity,    View,    StyleSheet}from 'react-native';import ModalDialog from '../component/ModalDialog.js'export default class ModalDemo extends Component {
   // 构造    constructor(props) {        super(props);        // 初始状态        this.state = {            isDialogVisible: false        };    }    showDialog(){        this.setState({isDialogVisible:true});    }    hideDialog(){        this.setState({isDialogVisible:false});    }    render() {        return (            
                   
    
      {
  this.hideDialog()}}                    _dialogRightBtnAction={()=>{
  this.hideDialog()}}                    />                
     
      this.showDialog()}>                    
      
       dialog
                      
                 
    
           );    }}var styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',    },    hello: {        fontSize: 20,        margin: 10,        textAlign:'left'    },}); 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53 
  54 
  55 
  56 
  57 
  58 
  59 
  60 
  61 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53 
  54 
  55 
  56 
  57 
  58 
  59 
  60 
  61