如何在Expo Router中同时使用抽屉菜单与底部标签菜单

问题原因 #

直接添加(tabs)/latest、(tabs)/shows作为抽屉页面无效，是因为(tabs)是一个嵌套的Tab导航组。Expo Router中，外层Drawer导航直接引用内层Tab的子路由时，要么会跳过Tab导航结构（导致Tab栏消失），要么因为路由映射规则不匹配而无法生效。

方案一：自定义抽屉内容（保留Tab栏） #

这种方法会保持原有的Tab导航结构，点击抽屉项时切换Tab的活跃页面，同时保留Tab栏显示。

修改(drawer)/_layout.js代码：

import { Drawer } from "expo-router/drawer";
import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";

export default function DrawerLayout() {
  return (
    <Drawer 
      screenOptions={{ headerShown: false, drawerPosition: "right" }}
      drawerContent={({ navigation }) => (
        <DrawerContentScrollView>
          <DrawerItem
            label="Home"
            onPress={() => navigation.navigate("(tabs)", { screen: "home" })}
          />
          <DrawerItem
            label="Latest"
            onPress={() => navigation.navigate("(tabs)", { screen: "latest" })}
          />
          <DrawerItem
            label="Shows"
            onPress={() => navigation.navigate("(tabs)", { screen: "shows" })}
          />
        </DrawerContentScrollView>
      )}
    >
      {/* 保留默认的(tabs)入口，隐藏其默认抽屉标签 */}
      <Drawer.Screen 
        name="(tabs)"
        options={{ drawerLabel: () => null }}
      />
    </Drawer>
  );
}

同时确保(tabs)/_layout.js中的Tab配置与上述screen名称一致：

import { Tabs } from "expo-router";

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: "Home" }} />
      <Tabs.Screen name="latest" options={{ title: "Latest" }} />
      <Tabs.Screen name="shows" options={{ title: "Shows" }} />
    </Tabs>
  );
}

方案二：直接注册Tab子路由（无Tab栏） #

如果你不需要保留Tab栏，可以直接在Drawer中注册每个Tab页面的完整路由路径，前提是你的项目中存在(tabs)/home.js、(tabs)/latest.js、(tabs)/shows.js这些文件：

修改(drawer)/_layout.js：

import { Drawer } from "expo-router/drawer";

export default function DrawerLayout() {
  return (
    <Drawer screenOptions={{ headerShown: false, drawerPosition: "right" }}>
      <Drawer.Screen 
        name="(tabs)/home"
        options={{ drawerLabel: "Home", title: "Home" }}
      />
      <Drawer.Screen 
        name="(tabs)/latest"
        options={{ drawerLabel: "Latest", title: "Latest" }}
      />
      <Drawer.Screen 
        name="(tabs)/shows"
        options={{ drawerLabel: "Shows", title: "Shows" }}
      />
    </Drawer>
  );
}

这种方式下，点击抽屉项会直接进入对应的页面，不会显示Tab导航栏。

内容的提问来源于stack exchange，提问作者Jijith J V