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、点击按钮d出modal（没有背景色），在modal上面加了一个leftView，当modal显示的时候，leftView有一个从左到右的动画效果

2、关于中间渐变的黑色图层，当modal显示的时候，在页面上添加了一个opacityView（透明的），动画效果的透明度改变，和leftView的动画一起进行。

3、点击黑色的背景隐藏leftView,其实modal上的View有两个子view，一个是leftView（宽度 = 屏幕的宽 - 100），一个是右侧的透明的TouchableOpacity（宽度 = 100），点击TouchableOpacity隐藏modal

---