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

【问题标题】：Prevent navigating twice when clicking a button quickly快速单击按钮时防止导航两次
【发布时间】：2017-06-01 05:39:50
【问题描述】：

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

我应该做什么样的检查才能防止这种情况发生？

【问题讨论】：

标签： react-native react-redux react-navigation

【解决方案1】：

基于this GitHub comment，您可以在addNavigationHelpers 中添加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();
        }
    }
};

【讨论】：

【解决方案2】：

反应导航已经支持它。您可以简单地添加 key 参数：

this.props.navigation.navigate({ key: 'ClinicDetail', routeName: 'ClinicDetail'，参数：{...}}）

见this

【讨论】：

【解决方案3】：

这有效，但前提是您使用 addNavigationHelpers。如果没有，也可以根据 Github 评论 (Here) 重写该方法：

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

【讨论】：

【解决方案4】：

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

示例：如果您希望从主页导航 -> 关于然后你按两下关于按钮说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

【讨论】：