react 点击两次_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页面的问题，这里不做细致介绍