如何在Expo Router中避免双导航栏？（基于Expo SDK 49及Router 2）

问题原因 #

双导航栏是因为底部Tabs导航自带了顶部导航栏，同时每个标签页内的Stack导航又额外渲染了一个导航栏，两者叠加导致显示重复。

解决方案 #

1. 隐藏Tabs导航的顶部栏

在Tabs的布局文件（通常是app/_layout.tsx或app/tabs/_layout.tsx）中，通过screenOptions关闭Tabs自带的顶部导航：

import { Tabs } from 'expo-router';

export default function RootLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false, // 核心：关闭Tabs的顶部导航栏
        tabBarActiveTintColor: '#2196F3', // 可选：自定义标签栏激活颜色
      }}
    >
      <Tabs.Screen name="home" options={{ title: '首页' }} />
      <Tabs.Screen name="profile" options={{ title: '我的' }} />
      {/* 其他标签页 */}
    </Tabs>
  );
}

2. 为每个标签页配置独立路由栈

在每个标签页的目录下创建_layout.tsx，用Stack组件包裹该标签页下的所有页面，这样每个标签页拥有独立的路由栈，跳转时底部标签栏不会消失：

比如app/home/_layout.tsx：

import { Stack } from 'expo-router';

export default function HomeStackLayout() {
  return (
    <Stack
      screenOptions={{
        headerShown: true, // 保留栈导航的顶部栏，用于页面跳转时显示返回按钮
        headerTintColor: '#fff',
        headerStyle: { backgroundColor: '#2196F3' },
      }}
    >
      <Stack.Screen name="index" options={{ title: '首页' }} />
      <Stack.Screen name="detail" options={{ title: '商品详情' }} />
      {/* 该标签页下的其他页面 */}
    </Stack>
  );
}

关键注意点 #

• 不要在全局布局中嵌套多层Stack导航，避免路由层级混乱
• 每个标签页的Stack仅负责自身页面的跳转，Tabs导航负责底部标签切换，两者职责分离

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