React Navigation 6.x中如何在不同Tab内重置对应Stack路由

你此前尝试的代码未生效是因为两个错误配置：

1. reset参数中设置了index: 1且路由数组包含两个页面，执行后会默认停在第二个路由DetailScreen2，和你的重置需求完全相反
2. 没有适配嵌套导航的路由结构，导致reset操作未作用到目标Stack导航器上

直接给第二个Tab的Screen配置加上unmountOnBlur: true即可，离开该Tab时会自动卸载整个嵌套栈，重新进入时就会初始化到初始路由DetailScreen1：

<Tab.Screen
  name="MyDetailsTabStack"
  component={MyDetailsStack}
  options={{
    title: 'My Details',
    tabBarLabel: 'My Details',
    unmountOnBlur: true
  }}
/>

该方案适合不需要保留嵌套栈临时状态的场景，完全匹配你的需求。

如果你需要在部分场景下保留栈状态、仅在特定条件下触发重置，可以修改你的tabPress监听逻辑，正确配置reset参数：

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

<Tab.Screen
  name="MyDetailsTabStack"
  component={MyDetailsStack}
  options={{
    title: 'My Details',
    tabBarLabel: 'My Details',
  }}
  listeners={({ navigation }) => ({
    tabPress: () => {
      // 重置嵌套栈到仅包含初始路由DetailScreen1
      navigation.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [{ name: 'DetailScreen1' }],
        })
      );
    },
  })}
/>

如果你的导航结构嵌套层级更深，可以通过给reset方法添加target参数，明确指定要操作的嵌套Stack导航器ID，避免和其他导航器的操作冲突。

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