这一篇其实是应该和之前的那篇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
