React Native之Android 和 iOS在点击触发事件时的兼容性处理
2017-07-05 13:52
483 查看
最近,我在项目中遇到了一个bug,bug的情况描述大致如下:
当点击按钮A时,弹出弹层,弹层有一个按钮B,逻辑是:当点击按钮B时,首先弹层消失,紧接着开始调取C接口流程。在Android上正确显示,但是iOS中只是弹层消失,并没有调取C接口事件。
对于这种情况,我之前开发过程中确实测试过simulator模拟器,iOS的模拟器显示是正常的,另外现在测试说Android也是好的,可以证明逻辑是完全没有问题。问题应该出在iOS与Android原始兼容性的问题。经我有过H5移动端web页面的开发经验,我觉得有可能原因出在iOS机型的点击也存在300ms的延迟导致。因为iOS需要延迟300ms来响应和判断是否用户点击是单次点击还是双击。由此,以下代码,即可解决问题。
注意:setTimeout是异步的,所以setTimeout中的函数里的this并不能表示当前的this,如果用ES6就可以完美的解决this的问题。
源码奉上:
核心在于:
当点击按钮A时,弹出弹层,弹层有一个按钮B,逻辑是:当点击按钮B时,首先弹层消失,紧接着开始调取C接口流程。在Android上正确显示,但是iOS中只是弹层消失,并没有调取C接口事件。
对于这种情况,我之前开发过程中确实测试过simulator模拟器,iOS的模拟器显示是正常的,另外现在测试说Android也是好的,可以证明逻辑是完全没有问题。问题应该出在iOS与Android原始兼容性的问题。经我有过H5移动端web页面的开发经验,我觉得有可能原因出在iOS机型的点击也存在300ms的延迟导致。因为iOS需要延迟300ms来响应和判断是否用户点击是单次点击还是双击。由此,以下代码,即可解决问题。
注意:setTimeout是异步的,所以setTimeout中的函数里的this并不能表示当前的this,如果用ES6就可以完美的解决this的问题。
源码奉上:
showBtnModalOrNo() { var _this = this; var isShow = this.state.modalVisible; if (isShow) { Animated.timing( _this.state.chaAnim, {toValue: 0, duration: 150} ).start(()=> { Animated.timing( _this.state.modalAnimatedHeight, {toValue: -400, duration: 300} ).start(()=> { _this.CMModal.hideModal(); _this.setState({ modalVisible: false, }); setTimeout(function(){ _this.props.checkFaceRecognition(); },1000); }); }) } else { _this.setState({ modalVisible: true, }) _this.CMModal.showModal(function () { Animated.timing( _this.state.modalAnimatedHeight, {toValue: 0, duration: 300} ).start(()=> { Animated.timing( _this.state.chaAnim, {toValue: 1, duration: 150} ).start(); }); }); } }
核心在于:
var _this=this; setTimeout(function(){ _this.props.checkFaceRecognition(); },1000);
相关文章推荐
- react-native的兼容性(Android、Ios)
- React Native之Image组件使用时Android和iOS兼容性
- Android graphics画图的点击事件处理
- 新增Activity、页面传值跳转和点击按钮触发事件『Android系列九』
- 事件处理之二:点击事件监听器的五种写法 分类: H1_ANDROID 2013-09-11 10:32 4262人阅读 评论(1) 收藏
- android——从打电话这个例子看android点击事件的3种处理方式
- datagridview 单击特定单元格触发事件 单击按钮列触发事件 (处理点击header触发事件异常)
- Android ListView长按事件触发点击事件
- 第15天 Android Touch事件学习 2 触发点击事件的地方
- Android中父View和子view的点击事件处理问题探讨
- iOS开发项目篇—52cell点击事件的处理
- ios UIButton的点击与松开事件处理
- 新闻客户端首页图片无限循环滚动展示(可点击触发不同事件)初步封装IOS
- Android自定义TextView中的超链接点击事件处理
- android点击返回时触发的事件
- Android实现图文混排(2) 通过webview实现 并实现点击 图片处理事件
- Android开发中在ListView中经常有Item的点击事件及Button或ImageButton等需要被点击的事件之间的处理方法
- Android关于点击事件的特别处理
- android 中多个线程处理完成触发一个事件如何设计
- android点击手机返回键触发事件