Expo抽屉导航异常：仅配置单屏却显示所有屏幕组件

问题原因 #

Expo Router的Drawer导航默认会自动扫描并添加app/目录下所有符合路由规则的文件（非下划线开头的文件/文件夹）到抽屉菜单中，哪怕你只在<Drawer.Screen>里声明了一个页面。

解决方案 #

方案1：手动指定抽屉菜单列表 #

通过screenOptions的drawerItemList自定义要显示的菜单项，过滤掉不需要的路由：

import { Stack } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Drawer } from 'expo-router/drawer';

const RootLayout = () => {
  return(
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer
        screenOptions={{
          drawerItemList: ({ routes, navigation }) => {
            // 只保留name为homeScreen的路由项
            return routes.filter(route => route.name === 'homeScreen').map(route => (
              <Drawer.Item
                key={route.name}
                label={route.options?.title || route.name}
                onPress={() => navigation.navigate(route.name)}
              />
            ));
          },
        }}
      >
        <Drawer.Screen 
          name="homeScreen"
          options={{title: 'Reportes Cercanos'}}
        />
      </Drawer>
    </GestureHandlerRootView>
  )
}

export default RootLayout;

方案2：隐藏不需要的路由组 #

如果app/目录下还有其他必须存在的路由页面，但不想在抽屉里显示，可以用Drawer.Group把它们归类并隐藏：

<Drawer>
  <Drawer.Screen 
    name="homeScreen"
    options={{title: 'Reportes Cercanos'}}
  />
  {/* 将不需要显示的路由放入此组，通过样式隐藏 */}
  <Drawer.Group screenOptions={{ drawerItemStyle: { display: 'none' } }}>
    {/* 这里添加其他不需要在抽屉显示的<Drawer.Screen> */}
  </Drawer.Group>
</Drawer>

方案3：调整项目结构 #

确保app/目录下只存放页面路由文件，将通用组件（非页面）移到components/目录下（比如你的MainHome如果是组件而非页面，应该放到app外的components文件夹）。Expo Router不会扫描app/外的目录作为路由，这样就不会出现无关组件被当成路由的情况。

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