React Navigation 5 嵌套底部标签栈导航跨栈跳转失效问题

错误根源 #

你两次的跳转写法都存在同一个核心问题：navigation.navigate的第一个参数是当前栈可直接匹配的路由ScreenA，导航会直接在当前StackA栈内完成跳转，后续携带的嵌套路由参数不会被外层导航解析，因此无法触发跨标签的跳转。

你的导航层级从外到内为：

• 根栈导航器
  • Root（底部标签导航器）
    • ScreenA（StackA导航器）
      • ScreenA（AScreen）
      • ScreenADetails（当前页面）
    • ScreenB（StackB导航器）
      • ScreenB（BScreen）
      • ScreenBDetails（目标页面）

解决方案 #

提供两种可直接生效的写法：

写法1：通过父级导航跳转 #

直接获取当前页面的父级底部标签导航器，调用其跳转方法：

const onPress = () => {
  // getParent() 无参数时默认获取上一级父导航，也就是底部标签导航器
  navigation.getParent()?.navigate("ScreenB", {
    screen: "ScreenBDetails",
    params: detailsData
  })
}

写法2：完整嵌套路径跳转 #

利用导航的冒泡特性，从最外层根路由开始写完整的嵌套路径：

const onPress = () => {
  navigation.navigate("Root", {
    screen: "ScreenB",
    params: {
      screen: "ScreenBDetails",
      params: detailsData
    }
  })
}

使用该写法需要提前在根栈参数类型中正确声明嵌套参数：

import { NavigatorScreenParams } from "@react-navigation/native";

export type RootStackParams = {
  Root: NavigatorScreenParams<BottomTabParams>;
  NotFound: undefined;
};

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