Expo Router中Stack跳转至Tab后底部Tab栏不显示问题求助

问题根源 #

你当前的app/_layout.tsx中的Stack导航未将(tabs)路由组注册为一个Screen，导致跳转至/(tabs)/时，仅加载了Tab下的页面组件，却没有触发(tabs)/_layout.tsx中的Tabs布局渲染，因此底部Tab栏不显示。

解决方案 #

1. 修改app/_layout.tsx，注册(tabs)路由

在Stack导航中添加(tabs)对应的Screen，确保父级Stack能识别这个嵌套路由组：

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack screenOptions={{}}>
      <Stack.Screen name='index' options={{ headerShown: false }} />
      <Stack.Screen name='Login' options={{ headerShown: false }} />
      // 新增这一行，将tabs路由组纳入Stack导航
      <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
    </Stack>
  );
}

2. 调整Login.tsx中的跳转路径

登录成功后，跳转至Tab组下的具体页面（或直接跳转Tab组），确保触发Tabs布局加载：

import { router } from 'expo-router';

// 登录成功后的跳转逻辑
const handleLoginSuccess = () => {
  // 方式1：直接跳转到Tab组的初始页面（推荐）
  router.push('/(tabs)/home');
  // 方式2：跳转至Tab组根路径，会自动触发initialRouteName设置的home页面
  // router.push('/(tabs)');
};

原理说明 #

Expo Router中，(tabs)是一个嵌套路由组，它的布局由自身的_layout.tsx控制，但必须在父级导航（这里是Stack）中注册该路由组，才能让父导航识别并加载对应的子布局。未注册时，跳转仅加载单个页面组件，不会触发Tabs容器的渲染，自然看不到底部Tab栏。

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