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页面的问题,这里不做细致介绍