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 是否显示

（二） 示例

<View>
    <Modal
        visible={this.state.modalVisible}
        animationType={'none'}
        transparent = {true}
        onRequestClose={()=> this.onRequestClose()}
    >
        <TouchableOpacity style={{flex:1}} onPress={this._onClose}>
            <View style={styles.modalBackground}>
                <View style={ [styles.modalBox, { position:'absolute',top:this.state.y } ]}>
                    {
                        this.props.datas.child_class.map(function (cateKey) {
                            return (
                                <View style={styles.innerBox}>
                                    <TouchableOpacity onPress={_linkTo}>
                                        <Text style={styles.cateKeyWords}>{cateKey.gc_name}</Text>
                                    </TouchableOpacity>
                                </View>
                            );
                        })
                    }
                </View>
            </View>
        </TouchableOpacity>
    </Modal>
</View>

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

图片.png

2、点击空白处关闭：

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

图片.png

3、定位：

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

图片.png 图片.png

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

图片.png