嵌套导航跳转异常：从Dashboard跳转至ScreenB后无法返回及查看初始路由

我的应用采用MainBottomTabNavigation + StackNavigation构建导航体系，结构如下：

• 主底部标签导航
  • Dashboard Screen
  • Screen 1（嵌套Stack Navigation）
    • Screen A（Stack初始页面）
    • Screen B

异常现象：
首次登录后，从Dashboard的组件直接跳转至Screen B，此时底部标签的Screen 1无法正常展示（仅显示Screen B，无法回到Screen A或正常切换标签）；但如果先进入Screen A再执行跳转操作，一切功能正常。

相关代码 #

底部标签导航代码 #

<Tab.Navigator
 initialRouteName="Home">
      <Tab.Screen
        name="Home"
        component={Dashboard}
        options={{tabBarLabel: 'Dashboard'}}
      />
      <Tab.Screen
        name="Screen1"
        component={Screen1}
        options={{tabBarLabel: 'Screen 1', headerShown: false}}
      />
    </Tab.Navigator>

Screen 1的Stack导航代码 #

<Stack.Navigator
  initialRouteName="StackHome">
      <Stack.Screen
        name="ScreenA"
        component={StackHomeScreen}
      />

      <Stack.Screen name="ScreenB" component={ScreenBScreen} />
    </Stack.Navigator>

跳转逻辑代码 #

<TouchableOpacity
            onPress={() => {
              navigation.navigate('StackHome', {
                screen: 'ScreenB',
              });
            }}>

React Navigation版本 #

{
  "@react-navigation/bottom-tabs": "^6.5.11",
  "@react-navigation/material-top-tabs": "^6.6.6",
  "@react-navigation/native": "^6.1.9",
  "@react-navigation/native-stack": "^6.9.17"
}

问题原因 #

直接跳转到嵌套Stack里的Screen B时，底部标签对应的Screen 1（Stack容器）还未初始化，导致导航栈状态异常，切换标签时无法正确恢复Stack的初始状态（Screen A）。

解决方法 #

方法1：修正嵌套路由跳转语法 #

跳转嵌套路由时，需要先指定外层的标签路由名称（Screen1），再在参数里指定内层Stack的目标页面，确保先初始化Stack容器：

<TouchableOpacity
  onPress={() => {
    navigation.navigate('Screen1', {
      screen: 'ScreenB',
    });
  }}>

方法2：关闭标签懒加载（可选） #

如果需要在应用启动时就初始化所有标签的导航栈，给Tab.Navigator添加lazy={false}属性，避免因懒加载导致的容器未初始化问题：

<Tab.Navigator
 initialRouteName="Home"
 lazy={false}>
  {/* ... 其他Screen配置 ... */}
</Tab.Navigator>

注：此方法会增加应用启动时的资源消耗，需根据实际场景选择。

方法3：重置导航栈状态（可选） #

如果需要确保跳转后导航栈结构完整，可使用reset方法直接构建正确的路由栈：

<TouchableOpacity
  onPress={() => {
    navigation.reset({
      index: 1,
      routes: [
        { name: 'Home' },
        { 
          name: 'Screen1',
          state: {
            routes: [
              { name: 'ScreenA' },
              { name: 'ScreenB' }
            ]
          }
        }
      ]
    });
  }}>

内容的提问来源于stack exchange，提问作者Allen P Biju