Expo Router中在含Stack导航的指定Tab内集成Drawer导航可行吗？

我使用React Native搭配Expo Router，已经实现了Bottom Tab导航：一个Tab对应settings.js文件，另一个Tab对应explore文件夹，该文件夹内已实现包含searchResult.js页面的Stack导航。现在希望在explore Tab中同时集成Drawer导航，但尝试后无法生效，怀疑可能与Stack导航有关。

现有代码 #

explore文件夹下的_layout.js #

import { Stack } from "expo-router";

export default () => {
    return (
        <Stack>
            <Stack.Screen name='index' options={{title:'Welcome (index) Page', headerTitleAlign: 'center',}} />
            <Stack.Screen name='searchResult' options={{title:'Search Result' ,headerTitleAlign: 'center' }} />
        </Stack>
    );
};

explore内Drawer文件夹下的_layout.js #

import { Drawer } from "./Drawer";

export default function RootLayout() {
  return <Drawer />;
}

Drawer文件夹内Drawer.tsx #

import {
    createDrawerNavigator,
    DrawerNavigationOptions,
  } from "@react-navigation/drawer";
  
  import { withLayoutContext } from "expo-router";
  
  const { Navigator } = createDrawerNavigator();
  
  export const Drawer = withLayoutContext<
    DrawerNavigationOptions,
    typeof Navigator
  >(Navigator);

问题出在导航嵌套层级和文件结构不匹配，Expo Router基于文件系统路由工作，你当前的Drawer没有正确包裹Stack导航，导致无法生效。按以下步骤调整：

1. 调整explore文件夹结构 #

把原Stack导航整合到Drawer内部，调整后结构如下：

explore/
├── _layout.js       // 改为Drawer作为外层布局
├── stack/           // 原Stack导航移至该文件夹
│   ├── _layout.js
│   ├── index.js
│   └── searchResult.js
└── Drawer/
    └── Drawer.tsx

2. 修改explore下的_layout.js #

让它作为Drawer导航入口，包裹Stack导航：

import { Drawer } from "./Drawer/Drawer";
import { Button } from "react-native";

export default function ExploreLayout() {
  return (
    <Drawer>
      <Drawer.Screen
        name="stack"
        options={{
          title: "探索",
          drawerLabel: "主页面",
          // 头部添加打开抽屉的按钮
          headerLeft: ({ navigation }) => (
            <Button onPress={() => navigation.openDrawer()} title="菜单" />
          ),
        }}
      />
      // 可在此添加其他Drawer页面
    </Drawer>
  );
}

3. 迁移Stack导航代码到stack文件夹的_layout.js #

直接复用你原来的Stack代码：

import { Stack } from "expo-router";

export default () => {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{ title: "Welcome (index) Page", headerTitleAlign: "center" }}
      />
      <Stack.Screen
        name="searchResult"
        options={{ title: "Search Result", headerTitleAlign: "center" }}
      />
    </Stack>
  );
};

4. 补全Drawer依赖配置 #

如果还未安装依赖，执行：

npx expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

同时修改项目根目录的babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

关键说明 #

• Expo Router中，_layout.js是当前文件夹所有页面的父导航，必须让Drawer成为explore Tab的顶层导航，再嵌套Stack。
• 原Drawer文件夹只需保留Drawer.tsx，不需要额外的_layout.js。
• 必须添加抽屉触发按钮（比如头部菜单按钮），否则无法唤起侧边栏。

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