快速单击按钮时防止导航两次 [英] Prevent navigating twice when clicking a button quickly
本文介绍了快速单击按钮时防止导航两次的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 react-navigation 并希望在用户快速点击/单击按钮时防止导航到同一屏幕两次.这是我的减速器:
I am using react-navigation and would like to prevent navigating to the same screen twice when the user tap/click a button quickly. Here is my reducer:
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 的输出是:
The output of the console.logs is:
第一次点击:
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"}]}
做什么样的检查可以防止这种情况发生?
What kind of check to do so I can prevent this happening?
推荐答案
react navigation 已经支持了.您可以简单地添加 key 参数:
It is already supported by react navigation. You can simply add key param:
this.props.navigation.navigate({ key: 'ClinicDetail', routeName:'ClinicDetail',参数:{...}})
this.props.navigation.navigate({ key: 'ClinicDetail', routeName: 'ClinicDetail', params: {...}})
参见这个
这篇关于快速单击按钮时防止导航两次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文