您的位置:首页 > Web前端 > React

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的问题。

源码奉上:

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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息