快速单击按钮时防止导航两次 [英] 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屋！