這一篇其實是應該和之前的那篇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
