React Navigation自定义返回逻辑：按需指定返回目标页面

问题分析 #

• 第一种代码触发栈溢出：beforeRemove回调中调用reset会再次触发beforeRemove事件，形成无限循环；
• 第二种代码不符合需求：组件挂载时直接执行reset，打开Screen C就立刻跳转到Screen A，未满足"返回时才跳转"的要求。

正确实现方案 #

核心思路 #

通过beforeRemove监听所有返回动作，区分来源页面处理：

1. 若来自Screen B，阻止默认返回行为，重置导航栈到Screen A；
2. 给自定义导航动作添加标记，避免reset再次触发beforeRemove循环；
3. 组件卸载时清理监听，避免内存泄漏。

代码实现 #

import { CommonActions } from '@react-navigation/native';

// 在Screen C组件内
const { navigation, route } = useNavigation();
const { cameFrom } = route.params; // 跳转时传入的来源标识

useEffect(() => {
  const unsubscribe = navigation.addListener('beforeRemove', (e) => {
    // 跳过自定义的重置动作，避免无限循环
    if (e.data?.action?.meta?.skipBeforeRemove) {
      return;
    }

    if (cameFrom === 'ScreenB') {
      e.preventDefault();
      navigation.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [{ name: 'ScreenA' }],
          meta: { skipBeforeRemove: true }, // 添加标记，跳过后续监听触发
        })
      );
    }
  });

  // 组件卸载时清理监听
  return unsubscribe;
}, [navigation, cameFrom]);

跳转时传递来源标识 #

从不同页面跳转到Screen C时，必须传递cameFrom参数：

• 从Screen B跳转：

navigation.navigate('ScreenC', { cameFrom: 'ScreenB' });

• 从Screen X/Y跳转：

navigation.navigate('ScreenC', { cameFrom: 'ScreenX' }); // 或'ScreenY'

说明 #

• 兼容Android硬件返回键、iOS返回手势及导航栏返回按钮；
• 通过meta标记解决导航动作循环触发监听的问题；
• 仅在用户主动触发返回动作时执行跳转逻辑，完全匹配需求。

内容的提问来源于stack exchange，提问作者NoLoHo