React Native中用react-navigation防止快速双击按钮重复跳转

嘿，我之前在开发React Native项目用react-navigation的时候，也碰到过快速点击导航按钮导致页面重复跳转的坑——比如连续点两下，同一个页面被push了两次，返回的时候要退两次，体验很差。折腾了一阵终于搞定了这个问题，下面分享我的实现方案，目前运行完全正常！

核心思路：拦截重复导航动作 #

我们可以通过自定义getStateForAction来拦截导航行为，判断当前是否已经在目标页面，或者是否有正在进行的跳转，从而避免重复触发。

1. 实现navigateOnce拦截函数 #

这个函数是核心，用来过滤掉重复的跳转请求：

const navigateOnce = (getStateForAction) => (action, state) => {
  // 只针对NAVIGATE动作做拦截，你也可以按需处理PUSH等其他动作
  if (action.type === 'Navigation/NAVIGATE') {
    // 获取当前页面的路由名称
    const currentRoute = state.routes[state.index];
    // 如果当前已经是目标页面，直接返回当前状态，不执行跳转
    if (currentRoute.routeName === action.routeName) {
      return state;
    }
    // 额外判断：防止页面切换过程中再次点击导致的重复push
    const isAlreadyNavigating = state.routes.some(route => 
      route.routeName === action.routeName && route.key !== currentRoute.key
    );
    if (isAlreadyNavigating) {
      return state;
    }
  }
  // 非重复跳转的情况，正常执行原导航逻辑
  return getStateForAction(action, state);
};

2. 应用到你的StackNavigator配置 #

把你现有的SignedOut导航配置，加上这个拦截器即可：

import { StackNavigator } from 'react-navigation'; // 注意根据你的react-navigation版本调整导入路径

export const SignedOut = StackNavigator({
  Onboarding: {
    screen: Onboarding,
    navigationOptions: { title: "Onboarding", header: null }
  },
  InitApp: {
    screen: InitApp,
    navigationOptions: { title: "Init", header: null }
  },
  Auth: {
    screen: Auth,
    navigationOptions: { title: "Auth", header: null }
  }
});

// 用navigateOnce包装原有的getStateForAction，实现拦截
SignedOut.router.getStateForAction = navigateOnce(SignedOut.router.getStateForAction);

工作说明 #

• 当用户快速点击导航按钮时，第一次跳转触发后，第二次的跳转请求会被拦截——因为此时当前页面已经是目标页面，或者正在跳转中，函数会直接返回当前状态，不执行新的跳转。
• 如果你需要允许带不同参数跳转到同一个页面（比如从列表页跳转到详情页，不同item的参数不同），只需要修改判断逻辑，对比action.params和当前页面的params即可，比如：

// 新增参数对比逻辑
if (currentRoute.routeName === action.routeName) {
  // 如果参数也完全相同，才拦截跳转
  if (JSON.stringify(currentRoute.params) === JSON.stringify(action.params)) {
    return state;
  }
}

这个方案兼容性很好，不管是旧版的react-navigation还是较新的版本（只要是基于getStateForAction的导航器）都可以用，而且不会影响其他正常的导航行为。

内容的提问来源于stack exchange，提问作者Trọng Nguyễn Công