RN的好處在這里就不多做介紹沫浆,下面直接看一個bug
一般情況捷枯,RN的點(diǎn)擊事件如果不做特殊處理話,點(diǎn)擊快一點(diǎn)都會出現(xiàn)觸發(fā)兩次或者多次的情況专执,下面提供一種解決方案淮捆,
1、自定義一個js文件 HandlerOnceTap.js
let isCalled = false, timer;
/**
* @param functionTobeCalled method 對調(diào)函數(shù)體
* @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';
// 一定要保證路徑的準(zhǔn)確性
沒有使用之前的代碼如下
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 },
);
}}
這種情況下攀痊,快速點(diǎn)擊按鈕會觸發(fā)兩次,導(dǎo)致alert兩次拄显,其他場景苟径,比如在push下一個頁面的時候也會出現(xiàn)這樣的情況,那么我們就可以用下面的方法代替
使用定時器后的方法如下
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 },
);
})}
這樣快速點(diǎn)擊的時候躬审,就不會出現(xiàn)觸發(fā)兩次的情況了
當(dāng)然也可以定義一個全局的變量棘街,也能解決push頁面的問題蟆盐,這里不做細(xì)致介紹