React Navigation v6自定义goBack返回异常及路由状态不一致问题求助

导航结构 #

• Tab Navigator
  • Stack A
    • Screen 1（记为A1）
  • Stack B
    • Screen 1（记为B1）
  • Stack C
    • Screen 1（记为C1）
    • Screen 2（记为C2）
    • Screen 3（记为C3）

问题现象 #

从A1导航至C1，再进入C2后，调用navigation.goBack()未返回预期的C1，而是直接回到A1。

相关代码 #

TabNavigator.js #

import ScreenA from './Screens/ScreenA'
import ScreenB from './Screens/ScreenB'
import { StackC } from './Stack'

const TabNavigator = () => {
  return (
    <Tab.Navigator initialRouteName="Home"
                   screenOptions={{
                     header: (props) => <Header {...props} />
                   }}
    >
      <Tab.Screen name="Stack A" component={ScreenA} initialParams={{ type: 'Stack A' }} />
      <Tab.Screen name="Stack B" component={ScreenB} initialParams={{ type: 'Stack B' }} />
      <Tab.Screen name="Stack C" component={StackC} options={{ tabBarButton: () => null }} />
    </Tab.Navigator>
  )
}

Stack.js #

import ScreenC1 from './Screens/ScreenC1'
import ScreenC2 from './Screens/ScreenC2'
import ScreenC3 from './Screens/ScreenC3'

const Stack = createNativeStackNavigator()

export const StackC = () => {
  return (
    <Stack.Navigator screenOptions={{headerShown: false, animation: 'none'}}
                     initialRouteName="C1"
    >
      <Stack.Screen name="C1" component={ScreenC1}  />
      <Stack.Screen name="C2" component={ScreenC2} />
      <Stack.Screen name="C3" component={ScreenC3} />
    </Stack.Navigator>
  )
}

补充说明 #

自定义Header中打印的路由栈始终为[A1, B1, Stack C]，但C2屏幕内打印的路由栈为正确的[C1, C2]，自定义返回按钮与实际屏幕状态不关联。

原因分析 #

1. 导航上下文不匹配：全局设置在Tab Navigator的screenOptions中的自定义Header，接收的是Tab Navigator级别的导航上下文，而非Stack C内部的导航上下文。此时Header里的navigation对象属于Tab导航栈，调用goBack()会直接回到Tab栈的上一个页面（即A1），而非Stack C内部栈的上一页C1。
2. 嵌套栈Header被隐藏：Stack C设置了headerShown: false，导致内部栈的原生Header无法显示，而全局Tab Header无法感知Stack C内部的路由变化，所以打印的路由栈始终停留在Tab级别的栈状态，无法反映Stack C内部的页面跳转。

解决方案 #

方案一：为嵌套栈单独设置Header #

将自定义Header绑定到Stack C内部的每个屏幕，使用Stack内部的导航上下文：

// 修改Stack.js
export const StackC = () => {
  return (
    <Stack.Navigator animation="none" initialRouteName="C1">
      <Stack.Screen 
        name="C1" 
        component={ScreenC1} 
        options={{ header: (props) => <Header {...props} /> }}
      />
      <Stack.Screen 
        name="C2" 
        component={ScreenC2} 
        options={{ header: (props) => <Header {...props} /> }}
      />
      <Stack.Screen 
        name="C3" 
        component={ScreenC3} 
        options={{ header: (props) => <Header {...props} /> }}
      />
    </Stack.Navigator>
  )
}

同时修改Tab Navigator，只给Stack A、Stack B设置全局Header，避免影响Stack C：

// 修改TabNavigator.js
const TabNavigator = () => {
  return (
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen 
        name="Stack A" 
        component={ScreenA} 
        initialParams={{ type: 'Stack A' }}
        options={{ header: (props) => <Header {...props} /> }}
      />
      <Tab.Screen 
        name="Stack B" 
        component={ScreenB} 
        initialParams={{ type: 'Stack B' }}
        options={{ header: (props) => <Header {...props} /> }}
      />
      <Tab.Screen 
        name="Stack C" 
        component={StackC} 
        options={{ tabBarButton: () => null }} 
      />
    </Tab.Navigator>
  )
}

方案二：在全局Header中适配嵌套栈导航 #

如果需要保留Tab级别的全局Header，可以通过导航API获取嵌套栈的上下文，判断当前路由后执行对应返回逻辑：

// 自定义Header组件
import { useNavigation, getCurrentRoute } from '@react-navigation/native';

const Header = (props) => {
  const navigation = useNavigation();

  const handleGoBack = () => {
    const currentRoute = getCurrentRoute(navigation);
    // 判断当前是否处于Stack C路由下
    if (currentRoute.name === "Stack C") {
      // 获取Stack C的嵌套导航上下文
      const stackCNav = navigation.getChildNavigation("Stack C");
      stackCNav.goBack();
    } else {
      // 其他Tab页面直接调用Tab导航的goBack
      navigation.goBack();
    }
  };

  return (
    // 你的Header布局，绑定返回按钮点击事件
    <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16 }}>
      <TouchableOpacity onPress={handleGoBack}>
        <Text>返回</Text>
      </TouchableOpacity>
    </View>
  );
};

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