防止快速单击按钮时导航两次

我正在使用反应导航，并且希望防止当用户快速点击/单击按钮时导航到同一屏幕两次。这是我的减速器：

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"}]}

需要做什么检查才能防止这种情况发生？

基于这个 GitHub 评论 https://github.com/react-community/react-navigation/issues/271#issuecomment-290449534你可以添加一个navigateWithDebounce in the addNavigationHelpers并发送这个而不是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();
        }
    }
};