React Native 防止重复点击,触发多次事件

RN的好处在这里就不多做介绍,下面直接看一个bug
一般情况,RN的点击事件如果不做特殊处理话,点击快一点都会出现触发两次或者多次的情况,下面提供一种解决方案,

1、自定义一个js文件 HandlerOnceTap.js

let isCalled = false, timer;  
  
/** 
 * @param functionTobeCalled method 对调函数体
 * @param interval  定时器
 */  
export default HandlerOnceTap = (functionTobeCalled, interval = 600) => {  
    if (!isCalled) {  
        isCalled = true;  
        clearTimeout(timer);  
        timer = setTimeout(() => {  
            isCalled = false;  
        }, interval);  
        return functionTobeCalled();  
    }  
};

2、 在需要使用的地方import 自定义的js文件

import HandlerOnceTap from '../HandlerOnceTap';
// 一定要保证路径的准确性

没有使用之前的代码如下

onPress={() => {
            Alert.alert(
              I18N.t('alert'),
              I18N.t('continue'),
              [
                { text: I18N.t('no'), onPress: () => console.log('Cancel Pressed') },
                { text: I18N.t('yes'), onPress: () => this.selectSession(item.item) },
              ],
              { cancelable: false },
            );
        }}

这种情况下,快速点击按钮会触发两次,导致alert两次,其他场景,比如在push下一个页面的时候也会出现这样的情况,那么我们就可以用下面的方法代替
使用定时器后的方法如下

onPress={() => HandlerOnceTap(() => {
          Alert.alert(
            I18N.t('alert'),
            I18N.t('continue'),
            [
              { text: I18N.t('no'), onPress: () => console.log('Cancel Pressed') },
              { text: I18N.t('yes'), onPress: () => this.selectSession(item.item) },
            ],
            { cancelable: false },
          );
        })}

这样快速点击的时候,就不会出现触发两次的情况了
当然也可以定义一个全局的变量,也能解决push页面的问题,这里不做细致介绍

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。