react native modal 自定义d出框

这一篇其实是应该和之前的那篇react native 触摸事件一起的，因为研究触摸事件就是为了做这个功能。

触摸事件文章地址： http://www.jianshu.com/p/1ef0b869e532

Modal 组件可以用来覆盖包含 react native 根视图的原生视图。

应用场景： 自定义d出框

react native 提供的 Alert 组件，局限性比较大，无法进行自定义，幸好还有 Modal 可以来进行自定义开发。

效果图如下：

（一） 常见属性：

animationType： enum('none', 'slide', 'fade') 动画类型

onRequestClose： Platform.OS === 'Android' ? PropTypes.func.isRequired : PropTypes.func

onShow： function 显示完毕的回调方法

transparent： bool 是否为透明，默认为不透明，d框需要将这个设置成 true.

visible： bool 是否显示

（二） 示例

1、布局：Modal 中可以再自定义布局，非常方便。而且 Modal 是覆盖整个屏幕的，可以形成半透明遮罩状态，这就需要在最外一层上面设置其背景为半透明：

2、点击空白处关闭：

Modal 的显示与隐藏是通过 modalVisible 的状态来决定的，所以只要在最外面加上触屏事件就可以了。

3、定位：

因为我需要它根据我所点击的位置去定位，所以需要取到点击事件处于屏幕的位置：

现在位置信息已经拿到并且将其放入 state 中，然后用的时候直接去取 state 的值就可以了。

1.第一种 element-ui dialog设置为点击d窗以外的区域不关闭d窗

在dialog的上面设置:close-on-click-modal="false"

2.第二种 全局配置

在mian.js里面：

import ElementUI from 'element-ui'

// 修改 el-dialog 默认点击遮照为不关闭

ElementUI.Dialog.props.closeOnClickModal.default = false

---