react native modal 自定义弹出框
发布网友
发布时间：2022-12-13 20:39
共1个回答
热心网友
时间：2023-11-14 02:56
触摸事件文章地址： http://www.jianshu.com/p/1ef0b869e532
Modal 组件可以用来覆盖包含 react native 根视图的原生视图。
应用场景： 自定义弹出框
react native 提供的 Alert 组件，局限性比较大，无法进行自定义，幸好还有 Modal 可以来进行自定义开发。
效果图如下：
（一） 常见属性：
animationType： enum('none', 'slide', 'fade') 动画类型
onRequestClose： Platform.OS === 'Android' ? PropTypes.func.isRequired : PropTypes.func
onShow： function 显示完毕的回调方法
transparent： bool 是否为透明，默认为不透明，弹框需要将这个设置成 true.
visible： bool 是否显示
（二） 示例
1、布局：Modal 中可以再自定义布局，非常方便。而且 Modal 是覆盖整个屏幕的，可以形成半透明遮罩状态，这就需要在最外一层上面设置其背景为半透明：
2、点击空白处关闭：
Modal 的显示与隐藏是通过 modalVisible 的状态来决定的，所以只要在最外面加上触屏事件就可以了。
3、定位：
因为我需要它根据我所点击的位置去定位，所以需要取到点击事件处于屏幕的位置：
现在位置信息已经拿到并且将其放入 state 中，然后用的时候直接去取 state 的值就可以了。
