如何阻止Expo Router的底部标签/抽屉菜单显示新建文件？

Expo Router默认会自动扫描同级路由文件并生成标签/抽屉导航项，要避免这种情况，只需手动控制导航结构，以下是具体方案：

标签导航（Tabs）处理 #

修改标签导航的布局文件（通常是app/(tabs)/_layout.tsx），手动指定需要显示在标签栏的页面，而非依赖自动生成：

import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function TabLayout() {
  return (
    <Tabs>
      {/* 仅添加需要在标签栏展示的页面 */}
      <Tabs.Screen
        name="home" // 对应 app/(tabs)/home.tsx
        options={{
          title: '首页',
          tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="profile" // 对应 app/(tabs)/profile.tsx
        options={{
          title: '我的',
          tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
        }}
      />
      {/* 未在此处定义的页面（如settings.tsx）不会出现在标签栏，但仍可通过router.push('/settings')跳转 */}
    </Tabs>
  );
}

抽屉导航（Drawer）处理 #

同理，修改抽屉导航的布局文件（通常是app/(drawer)/_layout.tsx），手动配置抽屉菜单的选项：

import { Drawer } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function DrawerLayout() {
  return (
    <Drawer>
      {/* 仅添加需要在抽屉展示的页面 */}
      <Drawer.Screen
        name="home" // 对应 app/(drawer)/home.tsx
        options={{
          title: '首页',
          drawerIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
        }}
      />
      <Drawer.Screen
        name="notifications" // 对应 app/(drawer)/notifications.tsx
        options={{
          title: '通知',
          drawerIcon: ({ color }) => <Ionicons name="notifications" size={24} color={color} />,
        }}
      />
      {/* 未定义的页面不会出现在抽屉菜单，仍可正常跳转访问 */}
    </Drawer>
  );
}

替代方案：嵌套路由存放非菜单页面 #

将不需要显示在导航菜单的页面放在嵌套子目录中，Expo Router不会自动扫描子目录下的路由文件生成导航项：

app/
├─ (tabs)/
│  ├─ _layout.tsx
│  ├─ home.tsx
│  ├─ profile.tsx
│  └─ settings/
│     └─ index.tsx  // 路由为/settings，不会自动出现在标签栏

这种方式无需修改布局文件，适合快速隔离非菜单页面。

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