Expo-Router中Tab导航嵌套Drawer导航：Profile页汉堡菜单实现

我在使用内含Stack页面的Tab Navigator，需在Profile页面添加Drawer Navigator提供的汉堡菜单，既要保留原有Stack页面（index和payments），又能通过菜单跳转到设置等Drawer页面。

项目文件结构 #

app
├── index.tsx
├── _layout.tsx
└── (tabs)
    ├── _layout.tsx
    ├── profile
    │   ├── index.tsx
    │   ├── _layout.tsx
    │   └── payments.tsx

原/profile/_layout.tsx代码 #

import { Stack } from "expo-router";
export default function LayoutProfile() {
  return (
    <Stack screenOptions={{ headerShown: true }}>
      <Stack.Screen name="index" options={{ headerShown: false }} />
      <Stack.Screen name="payments" options={{ headerShown: false }} />
    </Stack>
  );
}

尝试的嵌套导航代码 #

import { Stack } from "expo-router";
import { Drawer } from "expo-router/drawer";
export default function LayoutProfile() {
  return (
    <Drawer screenOptions={{ drawerPosition: "right", headerShown: false }}>
      <Stack screenOptions={{ headerShown: true }}>
        <Stack.Screen name="index" options={{ headerShown: false }} />
        <Stack.Screen name="payments" options={{ headerShown: false }} />
      </Stack>
    </Drawer>
  );
}

待解决问题 #

• 点击汉堡菜单打开Drawer
• 隐藏Drawer中与/profile/_layout重复的选项

解决方案 #

1. 添加汉堡菜单并绑定打开事件 #

修改/profile/_layout.tsx，在Stack头部添加汉堡按钮，通过useDrawerNavigation控制Drawer的打开：

import { Stack, useDrawerNavigation } from "expo-router";
import { Drawer } from "expo-router/drawer";
import { Ionicons } from "@expo/vector-icons";

export default function LayoutProfile() {
  const drawerNav = useDrawerNavigation();

  return (
    <Drawer screenOptions={{ drawerPosition: "right" }}>
      {/* 包裹Profile的Stack作为Drawer的一个屏幕 */}
      <Drawer.Screen 
        name="stack" 
        options={{
          drawerItemStyle: { display: "none" },
          headerShown: false,
        }}
      >
        {() => (
          <Stack screenOptions={{ 
            headerShown: true,
            headerRight: () => (
              <Ionicons
                name="menu"
                size={24}
                onPress={() => drawerNav.openDrawer()}
                style={{ marginRight: 16 }}
              />
            )
          }}>
            <Stack.Screen name="index" options={{ headerShown: false }} />
            <Stack.Screen name="payments" options={{ headerShown: false }} />
          </Stack>
        )}
      </Drawer.Screen>

      {/* 添加Drawer菜单中的目标页面，示例为设置页 */}
      <Drawer.Screen name="../../settings" options={{ title: "设置" }} />
      {/* 可根据需求添加更多Drawer页面 */}
    </Drawer>
  );
}

2. 隐藏Drawer中重复的选项 #

通过给包裹Stack的Drawer.Screen设置drawerItemStyle: { display: "none" }，直接隐藏该选项在Drawer菜单中的显示，确保菜单仅展示你需要的页面（如设置），不会出现Profile Stack相关的重复项。

注意：name="../../settings"的路径需根据你的实际文件结构调整，对应设置页面的相对路径。

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