這一篇其實是應該和之前的那篇react native 觸摸事件一起的，因為研究觸摸事件就是為了做這個功能。
觸摸事件文章地址：http://www.lxweimin.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