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

我正在使用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"}]}

要执行什么样的检查才能防止这种情况发生？

基于此，您可以在

添加导航帮助程序
中添加
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 comment（）重写该方法：

NavigationActions.overridedNavigate = (routeName, params, action) => {
    // some override logic
    return NavigationActions.navigate(routeName, params, action)
}

我修复了这个错误，创建了一个模块，在传递的时间间隔内只调用一次函数

示例：如果希望从主页导航->关于
然后按两次About（关于）按钮，例如
400 ms

navigateToAbout = () => dispatch(NavigationActions.navigate({routeName: 'About'}))

const pressHandler = callOnce(navigateToAbout,400);
<TouchableOpacity onPress={pressHandler}>
 ...
</TouchableOpacity>

navigateToAbout=（）=>dispatch（NavigationActions.navigate（{routeName:'About'}））
const pressHandler=callOnce（navigateToAbout，400）；
...

模块将注意在400毫秒内仅调用一次navigateToAbout

以下是NPM模块的链接：
react导航已经支持该模块。您只需添加键参数：

this.props.navigation.navigate（{key:'ClinicDetail'，routeName:
“ClinicDetail”，参数：{…}）

看