Expo-Router V2：Tab路由内嵌套Stack路由渲染异常问题排查

安全阿岳

2026-7-3

Expo Router V2嵌套Stack路由在Tab页面中无法显示原有内容的解决方案

项目背景

基于React-Native + Expo SDK 49构建项目，采用Expo-Router V2管理路由。

问题描述

需要在作为Tab页面的Home屏幕内嵌套Stack路由，但导航到Home时仅渲染新的Stack页面，无法正常显示Home原有内容。
注：所有路由文件夹均包含index.tsx、_layout.tsx及components文件夹。

文件夹结构

src
  |-(app) // 根Stack页面正常工作，包含index.tsx & _layout.tsx
    |-(login) // Stack页面
      |-...
    |-(signup) // Stack页面
      |-...
    |-(tabs)
      |-(history)
        |-...
      |-(home)
        |-(exercise_details)
        |-components
        |-_layout.tsx
        |-index.tsx
      |-(profile)
        |-...
    |-_layout.tsx

相关代码

app/_layout.tsx

import { Slot } from "expo-router";

import { StatusBar } from "expo-status-bar";

import { ExerciseProvider } from "@/contexts/ExerciseContext";

import { NativeBaseProvider, Box, Center } from "native-base";

import { AppLoader } from "@/components/AppLoader";

import { THEME } from "@/theme";
import {
  useFonts,
  Roboto_400Regular,
  Roboto_700Bold,
} from "@expo-google-fonts/roboto";

export default function RootLayout() {
  const [fontsLoaded] = useFonts({ Roboto_400Regular, Roboto_700Bold });

  const AppIsBuilding = () => {
    return (
      <Center flexGrow={1} bg="gray.700">
        <AppLoader size="lg" />
      </Center>
    );
  };

  const AppContent = () => {
    return (
      <Box flex={1} bg="gray.700">
        <ExerciseProvider>
          <Slot />
        </ExerciseProvider>
        <StatusBar
          animated
          translucent
          style="light"
          backgroundColor="transparent"
        />
      </Box>
    );
  };

  return (
    <>
      <NativeBaseProvider theme={THEME}>
        {fontsLoaded ? <AppContent /> : <AppIsBuilding />}
      </NativeBaseProvider>
    </>
  );
}

(tabs)/_layout.tsx

import { Tabs } from "expo-router";

import {
  House,
  UserCircle,
  ClockCounterClockwise,
} from "phosphor-react-native";

import { THEME } from "@/theme";

export default function TabsLayout() {
  return (
    <Tabs
      initialRouteName="(home)"
      screenOptions={{
        tabBarStyle: {
          height: 75,
          backgroundColor: THEME.colors.gray[600],
          borderColor: THEME.colors.gray[600],
        },
        tabBarActiveTintColor: THEME.colors.green[500],
        tabBarInactiveTintColor: THEME.colors.gray[300],
      }}
    >
      <Tabs.Screen
        name="(home)"
        options={{
          title: "",
          headerShown: false,
          tabBarIcon: ({ size, color }) => (
            <House
              size={size}
              color={color}
              weight={color === THEME.colors.green[500] ? "bold" : "regular"}
            />
          ),
        }}
      />
      <Tabs.Screen
        name="(history)"
        options={{
          title: "",
          headerShown: false,
          tabBarIcon: ({ size, color }) => (
            <ClockCounterClockwise
              size={size}
              color={color}
              weight={color === THEME.colors.green[500] ? "bold" : "regular"}
            />
          ),
        }}
      />
      <Tabs.Screen
        name="(profile)"
        options={{
          title: "",
          headerShown: false,
          tabBarIcon: ({ size, color }) => (
            <UserCircle
              size={size}
              color={color}
              weight={color === THEME.colors.green[500] ? "bold" : "regular"}
            />
          ),
        }}
      />
    </Tabs>
  );
}

(home)/_layout.tsx

import { router, Slot, Tabs } from "expo-router";

import { TouchableOpacity } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";

import { HStack, VStack, Text, Icon, Heading } from "native-base";

import { AppUserPicture } from "@/components/AppUserPicture";

export default function HomeLayout() {
  function handleGoBack() {
    router.canGoBack() && router.back();
  }

  return (
    <>
      <Tabs.Screen
        options={{
          headerShown: true,
          header: () => (
            <HStack
              bg="gray.600"
              padding={6}
              height={117}
              alignItems="center"
              justifyContent="space-between"
              safeArea
            >
              <AppUserPicture w={50} h={50} />

              <VStack flex={1} ml={4}>
                <Text color="gray.100" fontSize="md">
                  Olá,
                </Text>
                <Heading color="gray.100" fontSize="md">
                  Alan Graton
                </Heading>
              </VStack>

              <TouchableOpacity onPress={handleGoBack}>
                <Icon
                  as={MaterialIcons}
                  name="logout"
                  color="gray.200"
                  size={6}
                />
              </TouchableOpacity>
            </HStack>
          ),
        }}
      />
    </>
  );
}

(home)/(exercise_details)/_layout.tsx

import { Slot, Stack } from "expo-router";

export default function ExerciseDetailsLayout() {
  return (
    <Stack initialRouteName="(home)" screenOptions={{ headerShown: false }} />
  );
}

已尝试的解决方案

修改app/_layout.tsx，将Tabs包裹在Stack中，结果仍为仅显示新Stack页面

import { Stack } from 'expo-router';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({ Roboto_400Regular, Roboto_700Bold });

  const AppIsBuilding = () => {
    return (
      <Center flexGrow={1} bg="gray.700">
        <AppLoader size="lg" />
      </Center>
    );
  };

  const AppContent = () => {
    return (
      <Box flex={1} bg="gray.700">
        <ExerciseProvider>
          <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name="(tabs)" />
          </Stack>
        </ExerciseProvider>
        <StatusBar
          animated
          translucent
          style="light"
          backgroundColor="transparent"
        />
      </Box>
    );
  };

  return (
    <>
      <NativeBaseProvider theme={THEME}>
        {fontsLoaded ? <AppContent /> : <AppIsBuilding />}
      </NativeBaseProvider>
    </>
  );
}

移除HomeLayout和ExerciseDetailsLayout中的<Slot />，页面仅保留头部和底部TabBar，内容为空
在(tabs)/_layout.tsx中直接声明ExerciseDetails Stack，无效

<Tabs
      initialRouteName="(home)"
      screenOptions={{
        tabBarStyle: {
          height: 75,
          backgroundColor: THEME.colors.gray[600],
          borderColor: THEME.colors.gray[600],
        },
        tabBarActiveTintColor: THEME.colors.green[500],
        tabBarInactiveTintColor: THEME.colors.gray[300],
      }}
    >
      <Tabs.Screen
        name="(home)"
        options={{
          title: "",
          headerShown: false,
          tabBarIcon: ({ size, color }) => (
            <House
              size={size}
              color={color}
              weight={color === THEME.colors.green[500] ? "bold" : "regular"}
            />
          ),
        }}
      />
      <Stack.Screen
        name="(exercise_details)"
        options={{ headerShown: false }}
      />
      <Tabs.Screen
        name="(history)"
        options={{
          title: "",
          headerShown: false,
          tabBarIcon: ({ size, color }) => (
            <ClockCounterClockwise
              size={size}
              color={color}
              weight={color === THEME.colors.green[500] ? "bold" : "regular"}
            />
          ),
        }}
      />
      <Tabs.Screen
        name="(profile)"
        options={{
          title: "",
          headerShown: false,
          tabBarIcon: ({ size, color }) => (
            <UserCircle
              size={size}
              color={color}
              weight={color === THEME.colors.green[500] ? "bold" : "regular"}
            />
          ),
        }}
      />
    </Tabs>

参考相关帖子调整结构，仍未解决问题

正确解决方案

核心问题是Home页面的_layout.tsx未正确使用Stack管理嵌套路由，也未渲染内容容器；同时exercise_details的布局配置逻辑错误，以下是修复步骤：

修改(home)/_layout.tsx：用Stack组件包裹，将Home的主页面（index.tsx）注册为Stack的一个Screen，自动嵌套子路由：

import { router, Stack } from "expo-router";
import { TouchableOpacity } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { HStack, VStack, Text, Icon, Heading } from "native-base";
import { AppUserPicture } from "@/components/AppUserPicture";

export default function HomeLayout() {
  function handleGoBack() {
    router.canGoBack() && router.back();
  }

  return (
    <Stack>
      {/* 注册Home主页面，配置头部 */}
      <Stack.Screen
        name="index"
        options={{
          headerShown: true,
          header: () => (
            <HStack
              bg="gray.600"
              padding={6}
              height={117}
              alignItems="center"
              justifyContent="space-between"
              safeArea
            >
              <AppUserPicture w={50} h={50} />
              <VStack flex={1} ml={4}>
                <Text color="gray.100" fontSize="md">
                  Olá,
                </Text>
                <Heading color="gray.100" fontSize="md">
                  Alan Graton
                </Heading>
              </VStack>
              <TouchableOpacity onPress={handleGoBack}>
                <Icon
                  as={MaterialIcons}
                  name="logout"
                  color="gray.200"
                  size={6}
                />
              </TouchableOpacity>
            </HStack>
          ),
        }}
      />
      {/* 子路由（exercise_details）会自动被Stack管理，无需额外声明 */}
    </Stack>
  );
}

调整(home)/(exercise_details)/_layout.tsx：删除该文件或修改为正确的子Stack配置（如果需要单独的页面头部）：

import { Stack } from "expo-router";

export default function ExerciseDetailsLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="index" />
    </Stack>
  );
}

保持(tabs)/_layout.tsx不变：无需在Tabs容器中添加exercise_details路由，它已嵌套在Home的Stack内部。

关键说明

每个_layout.tsx必须通过Stack/Tabs组件或<Slot />渲染内容，否则页面会空白
Tab页面嵌套Stack，必须在该Tab的_layout.tsx中用Stack组件管理，将Tab主页面作为Stack的一个Screen
Tabs和Stack是独立的导航容器，不能直接在Tabs中注册Stack.Screen，需在对应Tab内部处理嵌套逻辑

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

Expo-Router V2：Tab路由内嵌套Stack路由渲染异常问题排查

项目背景 #

问题描述 #

文件夹结构 #

相关代码 #

app/_layout.tsx #

(tabs)/_layout.tsx #

(home)/_layout.tsx #

(home)/(exercise_details)/_layout.tsx #

已尝试的解决方案 #

正确解决方案 #

关键说明 #