为什么 expo 的 react native 项目的文件名会有 ( _ + 这些字符？

Question

https://segmentfault.com/a/1190000046045527

使用 npx create-expo-app x-s 创建的项目会有

• app/(tabs)
• app/(tabs)/_layout.tsx
• app/+not-found.tsx
  这样 ( + 开头的文件夹和文件，这是在我之前写 python 和 vue 没有见过，一般编程对于文件夹和文件名的开头都是英文，但是 react native 生态下居然会有 ( + 这些字符开头？

为什么 react native 要这样做？

Answer 1

约定俗成。

括号是 Group（分组）。

https://docs.expo.dev/router/layouts/#groups

下划线是 Layout（布局）。

https://docs.expo.dev/develop/file-based-routing/#_layout-file

加号是一种特殊的路由组件，它不对应常规路由，但却又是一个路由组件，比如最常见的就是匹配任何其他路由的 404 页面了。

https://docs.expo.dev/tutorial/add-navigation/#add-a-not-found-

---

为啥这么搞？因为 expo 的路由系统采用了类似于 Next.js、UmiJS 的那种“约定式路由”，即约定大于配置，通过目录和文件及其命名分析出路由配置、替代代码里手写路由的这种形式。

但开发中肯定有一些文件它会出现在路由目录里，而我们又不希望它被注册成路由，所以得想办法把它们排除掉。可说好了约定大于配置的，要是再单独搞一个配置文件去 exclude 那多 Low 啊？于是乎自然而然想到从文件命名上搞一些特殊的前缀或者保留字之类的方式去排除它们了。

于是 expo 就用了下划线和加号做前缀。

用这种方式做排除以外还有带来了一个额外的好处，那就是这种特殊字符开头的文件名，在 IDE 里按文件名排序的话一般都是靠前的（像是通讯录里的微商们总喜欢给自己昵称前加一堆 A 一样），这样当目录中有一堆文件的话也更容易一眼看出哪个文件是公共的、特殊的。