快速点击按钮时避免导航两次
问题描述:
我正在使用react-navigation,并且想要在用户点击/快速点击按钮时避免两次导航到同一屏幕。这里是我的减速器:快速点击按钮时避免导航两次
export const navReducer = (state = initialState, action = {}) => {
let nextState;
switch (action.type) {
case TO_LOGIN:
nextState = RootNav.router.getStateForAction(
NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({
type: NavigationActions.NAVIGATE,
routeName: TO_LOGIN
})],
key: null
}), state);
break;
case TO_HOME:
nextState = RootNav.router.getStateForAction(
NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({
type: NavigationActions.NAVIGATE,
routeName: TO_HOME
})],
}), state);
break;
default:
if (action.type === NavigationActions.NAVIGATE) {
console.log('action: ' + JSON.stringify(action));
console.log('state: ' + JSON.stringify(state));
console.log('nextState: ' + JSON.stringify(RootNav.router.getStateForAction(action, state)));
}
nextState = RootNav.router.getStateForAction(action, state);
break;
}
return nextState || state;
};
的console.logs的输出是:
首先点击:
action: {"type":"Navigation/NAVIGATE","routeName":"ClinicDetail","params":{"section":0,"from":"near"}}
state: {"index":0,"routes":[{"routeName":"TO_HOME","key":"id-1496294907150-4"}]}
nextState: {"index":0,"routes":[{"routeName":"TO_HOME","key":"id-1496294907150-4"}]}
第二点击:
action: {"type":"Navigation/NAVIGATE","routeName":"ClinicDetail","params":{"section":0,"from":"near"}}
state: {"index":0,"routes":[{"routeName":"TO_HOME","key":"id-1496294907150-4"}]}
nextState: {"index":0,"routes":[{"routeName":"TO_HOME","key":"id-1496294907150-4"}]}
什么样的检查,以这样做我可以防止这种情况发生?
答
基于this GitHub comment您可以添加在addNavigationHelpers
一个navigateWithDebounce
和调度此,而不是navigate
:
_addNavigationHelpers = (navigation) => {
const original = addNavigationHelpers(navigation);
let debounce;
return {
...original,
navigateWithDebounce: (routeName, params, action) => {
let func =() => {
if (debounce) {
return;
}
navigation.dispatch(NavigationActions.navigate({
routeName,
params,
action
}));
debounce = setTimeout(() => {
debounce = 0;
}, 1000)
};
return func();
}
}
};
答
这工作,但只有当你使用addNavigationHelpers。如果不是,也是基于在Github评论(Here),您可以覆盖的方法:
NavigationActions.overridedNavigate = (routeName, params, action) => {
// some override logic
return NavigationActions.navigate(routeName, params, action)
}
答
我通过创建在通过间隔调用一个函数只有一次模块固定这个bug。
示例:如果您希望从主页导航 - >关于 然后在说400 ms
中按关于按钮两次。
navigateToAbout =() => dispatch(NavigationActions.navigate({routeName: 'About'}))
const pressHandler = callOnce(navigateToAbout,400);
<TouchableOpacity onPress={pressHandler}>
...
</TouchableOpacity>
该模块将小心它在400毫秒内调用navigateToAbout only once
。
以下是NPM模块的链接:https://www.npmjs.com/package/call-once-in-interval