Expo抽屉导航意外显示components目录内容，如何仅保留指定屏幕？

问题场景 #

我创建了一个React Native Expo应用，文件结构如下：

myApp
---- app/
-------- _layout.js
-------- screens/
-------- components/

在_layout.js中配置了抽屉导航，代码如下：

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

export default function Layout() {
    return (
        <GestureHandlerRootView style = {{ "flex": 1 }}>
            <Drawer screenOptions = {{ HEADER-AND-DRAWER-STYLE }}>
                <Drawer.Screen name = "index" options = {{ "drawerLabel": "Home", "title": "Home" }} />
                <Drawer.Screen name = "screens/screen1/screen1" options = {{ "drawerLabel": "Screen 1", "title": "Screen 1" }} />
                <Drawer.Screen name = "screens/screen2/screen2" options = {{ "drawerLabel": "Create Exercise", "title": "Create Exercise" }} />
        </GestureHandlerRootView>
    );
}

当前抽屉导航能正常跳转至定义的屏幕，但components目录下的所有内容也被自动添加到抽屉中，显示为路径文本，需要移除这些多余链接，只保留_layout.js中定义的屏幕。

解决方案 #

方法一：将components目录移出app目录 #

Expo Router默认会扫描app/目录下的所有文件生成路由，把components目录移到项目根目录（与app同级），就能避免被路由系统识别。调整后的文件结构：

myApp
---- app/
-------- _layout.js
-------- screens/
---- components/

方法二：在components目录下添加_layout.js文件 #

如果不想移动目录，在app/components/下创建_layout.js文件，通过配置阻止该目录下的内容被注册为路由：

export const unstable_settings = {
  initialRouteName: null,
};

export default function ComponentsLayout() {
  return null;
}

额外修正：补全Drawer组件闭合标签 #

原_layout.js代码存在语法错误，Drawer组件未闭合，修正后的代码如下：

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

export default function Layout() {
    return (
        <GestureHandlerRootView style={{ flex: 1 }}>
            <Drawer screenOptions={{ /* 替换为你的头部和抽屉样式 */ }}>
                <Drawer.Screen name="index" options={{ drawerLabel: "Home", title: "Home" }} />
                <Drawer.Screen name="screens/screen1/screen1" options={{ drawerLabel: "Screen 1", title: "Screen 1" }} />
                <Drawer.Screen name="screens/screen2/screen2" options={{ drawerLabel: "Create Exercise", title: "Create Exercise" }} />
            </Drawer>
        </GestureHandlerRootView>
    );
}

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