React Native之Android 和 iOS在点击触发事件时的兼容性处理

最近,我在项目中遇到了一个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);



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值