Expo Router中Tab导航嵌套Stack时，直接跳转至其他Tab深层页面后无法返回初始页面的问题

问题分析 #

你遇到的问题是Expo Router的默认行为导致的：当从一个Tab直接跳转至另一个Tab的深层页面时，Expo Router只会加载目标深层页面，不会自动构建该Tab下的完整栈结构（即初始页面screenB1不会被加入栈中）。这就导致后续调用goBack()时无法回到初始页面，因为栈中没有该页面的历史记录。

Expo Router底层基于React Navigation，所以我们可以利用React Navigation的嵌套导航特性来解决这个问题，以下是几种官方支持的解决方案：

解决方案1：使用React Navigation嵌套导航语法（推荐） #

React Navigation的嵌套导航允许我们通过指定Tab和深层页面的层级关系来跳转，这样框架会自动确保Tab的初始页面被加入栈中。你可以修改自定义的useAppRouter钩子，结合React Navigation的useNavigation来实现：

import { router } from "expo-router";
import { useNavigation } from "@react-navigation/native";
import { PageNames } from "../pages/PageNames";

export const useAppRouter = () => {
  const navigation = useNavigation();

  const navigateTo = (screenName: PageNames, params?: Record<string, any>) => {
    // 针对需要嵌套栈的Tab页面，使用React Navigation的嵌套导航语法
    if (screenName === PageNames.SCREEN_B3) {
      // 先导航到TabB的根（自动包含初始页面screenB1），再跳转到screenB3
      navigation.navigate("tabB", {
        screen: "screenB3",
        params: params,
      });
      return;
    }

    // 其他页面保持原有跳转逻辑
    router.push({
      pathname: screenName as any,
      params,
    });
  };

  const goBack = () => {
    if (router.canGoBack()) {
      router.back();
    } else {
      return;
    }
  };

  return { navigateTo, goBack };
};

原理：通过navigation.navigate的嵌套调用，React Navigation会自动初始化TabB的栈（包含初始页面screenB1），再将screenB3压入栈中。此时栈结构为screenB1 -> screenB3，调用goBack()就能正常返回初始页面。

解决方案2：在深层页面中重置栈结构 #

如果需要在深层页面加载时动态补全栈结构，可以在目标页面（如screenB3）中使用StackActions.reset来重置栈，确保初始页面被包含：

// app/tabB/screenB3.tsx
import { useNavigation, StackActions } from "@react-navigation/native";
import { useEffect } from "react";

export default function ScreenB3() {
  const navigation = useNavigation();

  useEffect(() => {
    const currentState = navigation.getState();
    // 检查栈中是否已包含初始页面screenB1
    const hasInitialScreen = currentState.routes.some(
      (route) => route.name === "screenB1"
    );

    if (!hasInitialScreen) {
      // 重置栈结构：初始页面 -> 当前深层页面
      navigation.dispatch(
        StackActions.reset({
          index: 1, // 栈顶索引（当前页面的位置）
          routes: [
            { name: "screenB1" }, // 初始页面
            { name: "screenB3", params: currentState.routes[0].params }, // 当前页面
          ],
        })
      );
    }
  }, []);

  return (
    // 页面内容
  );
}

原理：当screenB3挂载时，检查当前栈结构，如果缺少初始页面，则通过StackActions.reset重置栈，强制将初始页面加入栈底，这样后续goBack()就能正确返回。

解决方案3：预加载所有Tab的初始页面 #

通过设置Tab导航的lazy: false，可以让Expo Router在App启动时预加载所有Tab的初始页面，确保它们始终处于挂载状态：

// app/(tabs)/_layout.tsx（你的Tab布局文件）
import { Tabs } from "expo-router";

export default function TabsLayout() {
  return (
    <Tabs
      lazy={false} // 禁用懒加载，预加载所有Tab的初始页面
      screenOptions={{
        // 你的Tab配置
      }}
    >
      <Tabs.Screen name="tabA" options={{ title: "Tab A" }} />
      <Tabs.Screen name="tabB" options={{ title: "Tab B" }} />
    </Tabs>
  );
}

注意：这个方案只是预加载初始页面的组件代码和挂载状态，仍需要结合方案1或2来确保跳转时栈结构的完整性，否则直接跳转深层页面时栈中还是只有目标页面。

总结 #

最推荐使用解决方案1，因为它完全符合React Navigation的官方设计规范，能从根源上确保栈结构的正确性，同时代码侵入性最低。如果需要针对特定页面做兼容，可以选择解决方案2。预加载方案适合需要所有Tab初始页面保持挂载的场景。

内容来源于stack exchange