Question

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

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

这样做的检查可以防止这种情况发生？

Answer 1

根据this GitHub comment，您可以在navigateWithDebounce中添加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();
        }
    }
};

Answer 2

反应导航已经支持它。您只需添加密钥参数：

即可

this.props.navigation.navigate（{key：＆＃39; ClinicDetail＆＃39;，routeName：＆＃39; ClinicDetail＆＃39;，params：{...}}）

请参阅this

Answer 3

这只适用于你使用addNavigationHelpers的情况。如果没有，也可以根据Github评论（Here）覆盖方法：

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

Answer 4

我通过创建一个在传递的时间间隔内仅调用一次函数的模块来修复此错误。

示例：如果您希望从Home导航 - ＆gt;关于然后按说明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

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

4 个答案: