React Navigation跨标签跳转如何保留返回键功能并维持抽屉路由栈

问题原因分析 #

1. 第一种写法无法跳转到Edit页的原因：Edit 是ProgramStackNavigator下和Programs平级的路由，不属于ProgramsScreen内部的DrawerNavigator路由，将screen: 'Edit'嵌套在Drawer的路由参数中，Drawer导航无法识别该路由，只会停留在对应id的ProgramPreviewScreen页面。
2. 第二种写法无返回按钮的原因：直接跳转ProgramTab下的Edit时，如果ProgramStackNavigator没有提前初始化，React Navigation会将Edit设为ProgramStack的初始路由，栈内不存在Programs页面，自然没有返回按钮；只有你之前进入过ProgramTab，ProgramStack已经初始化且栈中存在Programs页面时，跳转Edit才会将页面压入栈，显示返回按钮。

解决方案 #

方案1：参数标记+跳转后触发压栈 #

该方案逻辑简单易维护，适配绝大多数场景：
第一步，在HomeScreen跳转时传入选中的programId和跳转Edit的标记位：

navigation.navigate('ProgramTab', {
  screen: 'Programs',
  params: {
    screen: item.programId, // 控制Drawer选中对应program项
    shouldJumpToEdit: true, // 自定义标记位
    programId: item.programId
  }
});

第二步，在ProgramsScreen中监听路由参数，触发Edit页面压栈：

import { useNavigation, useRoute } from '@react-navigation/native';
import { useEffect } from 'react';

const ProgramsScreen = () => {
  const route = useRoute();
  // 这里获取的是ProgramStackNavigator的导航实例
  const stackNavigation = useNavigation();

  useEffect(() => {
    const { shouldJumpToEdit, programId } = route.params || {};
    if (shouldJumpToEdit && programId) {
      // 将Edit压入ProgramStack，此时Programs已在栈中，Edit页会显示返回按钮
      stackNavigation.push('Edit', { programId });
      // 清除标记位，避免切回Programs时重复触发跳转
      stackNavigation.setParams({ shouldJumpToEdit: undefined });
    }
  }, [route.params, stackNavigation]);

  // 原有DrawerNavigator逻辑保持不变
}

方案2：dispatch直接构造完整路由栈 #

如果不想在ProgramsScreen中增加额外监听逻辑，可以直接通过dispatch构造完整的路由状态，一步完成跳转：

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

// HomeScreen内的跳转逻辑
const programId = item.programId;
// 先跳转选中Drawer对应项
navigation.dispatch(
  CommonActions.navigate({
    name: 'ProgramTab',
    params: {
      screen: 'Programs',
      params: {
        screen: programId,
        params: { programId }
      }
    }
  })
);
// 再将Edit页压入ProgramStack
navigation.dispatch(state => {
  const programTabRoute = state.routes.find(route => route.name === 'ProgramTab');
  if (programTabRoute?.state?.key) {
    return CommonActions.navigate({
      name: 'Edit',
      params: { programId },
      target: programTabRoute.state.key
    });
  }
  return CommonActions.goBack();
});

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