如何在Expo Router中实现左右两侧多抽屉布局？

当然有开发者成功实现过。Expo Router底层基于React Navigation，所以可以复用React Navigation的多抽屉思路，只需适配Expo Router的文件路由规则即可。

核心实现步骤如下：

• 创建根布局文件（如app/_layout.tsx），在其中嵌套两个Drawer Navigator，分别对应左、右侧抽屉
• 为每个Drawer设置不同的drawerPosition属性，一个设为'left'，另一个设为'right'
• 将主屏幕作为两个Drawer的嵌套子路由，让主屏幕具备触发两个抽屉打开的能力
• 使用useDrawerNavigation钩子并指定对应Drawer的ID，分别控制左右抽屉的显示与隐藏

以下是简化的代码示例：

// app/_layout.tsx
import { Drawer } from 'expo-router/drawer';

export default function RootLayout() {
  return (
    <Drawer
      id="leftDrawer"
      drawerPosition="left"
      screenOptions={{ drawerLabel: '左侧菜单' }}
    >
      <Drawer.Screen name="(main)" />
      <Drawer.Screen name="left-menu" />
    </Drawer>
  );
}

// app/(main)/_layout.tsx
import { Drawer } from 'expo-router/drawer';

export default function MainLayout() {
  return (
    <Drawer
      id="rightDrawer"
      drawerPosition="right"
      screenOptions={{ drawerLabel: '右侧菜单' }}
    >
      <Drawer.Screen name="home" />
      <Drawer.Screen name="right-menu" />
    </Drawer>
  );
}

// app/(main)/home.tsx
import { useDrawerNavigation } from '@react-navigation/drawer';
import { Button, View } from 'react-native';

export default function HomeScreen() {
  const leftDrawerNav = useDrawerNavigation('leftDrawer');
  const rightDrawerNav = useDrawerNavigation('rightDrawer');

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="打开左侧抽屉" onPress={() => leftDrawerNav.openDrawer()} />
      <Button title="打开右侧抽屉" onPress={() => rightDrawerNav.openDrawer()} />
    </View>
  );
}

需要注意的细节：

• 每个Drawer必须设置唯一的id，才能通过useDrawerNavigation精准控制目标抽屉
• 嵌套布局需遵循Expo Router的路由结构，避免出现路由冲突
• 若需自定义抽屉样式，可通过drawerContent属性传入自定义组件，用法与React Navigation一致

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