React Navigation v6嵌套Tab Stack导航返回与Tab重置问题

云上老周

2026-7-12

导航结构

Tab 1
- Screen 1（初始页面）
- Screen 2
Tab 2
- Screen 3（初始页面）
- Screen 4

场景与问题

需求：从Screen 1直接跳转到Screen 4，期望从Screen 4返回时回到Screen 1，且点击Tab 2按钮时默认显示Screen 3。

操作及异常现象：

从Screen 1导航到Screen 4功能正常，代码如下：

this.props.navigation.navigate("Tab 2", {
  screen: "Screen 4",
  initial: false,
  params: {...some params}
})

在Screen 4调用goBack()时，却回到了Screen 3而非Screen 1：

goBack() {
  this.props.navigation.goBack();
}

点击Tab 1可正常回到Screen 1，但再次点击Tab 2时，显示的是Screen 4而非期望的Screen 3。

使用的React Navigation版本：

"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/drawer": "^6.4.3",
"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.6.2",
"@react-navigation/stack": "^6.2.1",

解决方案

通过监听Tab切换事件，重置非当前Tab的栈到初始页面，具体步骤如下：

创建Tab切换监听函数（React Navigation v6已移除dangerouslyGetState()，需使用getState()替代）：

TabPressListener = ({ navigation, route }: any) => ({
  tabPress: (e: any) => {
    const state = navigation.getState();
    if (state) {
      // 获取所有非当前点击的Tab
      const nonTargetTabs = state.routes.filter((r: any) => r.key !== e.target);

      nonTargetTabs.forEach((tab: any) => {
        // 获取嵌套栈的key
        const stackKey = tab?.state?.key;

        // 传入要重置的栈key，使用popToTop重置到初始页面
        navigation.dispatch({
          ...StackActions.popToTop(),
          target: stackKey,
        });
      });
    }
  }
})

在每个Tab.Screen组件中添加listener属性引用该函数：

<Tab.Screen
   name={'Tab 1'}
   listener={this.TabPressListener}
>
{/* 页面组件内容 */}
</Tab.Screen>

<Tab.Screen
   name={'Tab 2'}
   listener={this.TabPressListener}
>
{/* 页面组件内容 */}
</Tab.Screen>