react native modal 自定义弹出框

这一篇其实是应该和之前的那篇react native 触摸事件一起的，因为研究触摸事件就是为了做这个功能。
触摸事件文章地址：http://www.jianshu.com/p/1ef0b869e532

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

应用场景： 自定义弹出框

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

效果图如下：

图片.png

（一） 常见属性：

animationType： enum('none', 'slide', 'fade') 动画类型
onRequestClose： Platform.OS === 'Android' ? PropTypes.func.isRequired : PropTypes.func
onShow： function 显示完毕的回调方法
transparent： bool 是否为透明，默认为不透明，弹框需要将这个设置成 true.
visible： bool 是否显示

（二） 示例

     this.onRequestClose()}
    >
        
            
                
                    {
                        this.props.datas.child_class.map(function (cateKey) {
                            return (
                                
                                    
                                        {cateKey.gc_name}
                                    
                                
                            );
                        })
                    }
                
            
        
    

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

图片.png

2、点击空白处关闭：

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

图片.png

3、定位：

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

图片.png

图片.png

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

图片.png