在使用 Expo Router 构建 React Native 应用时，理解文件和目录的命名规则至关重要。这不仅影响应用的路由和组件结构，还能提高项目的可维护性和可扩展性。本文将深入解析以下目录结构，帮助您掌握其中的命名奥秘。
css
复制代码
├── (tabs)
│ ├── _layout.tsx
│ ├── explore.tsx
│ └── index.tsx
├── +html.tsx
├── +not-found.tsx
└── _layout.tsx
一、括号 () 包裹的文件夹：分组（Group）
什么是分组？
- 语法：
(folderName) - 作用：用于组织代码结构，不影响 URL 路径。
示例解析：
-
(tabs)文件夹：- 作用：将与标签导航相关的页面和组件归类在一起。
- 影响：
tabs不会出现在 URL 路径中，仅用于代码组织。
为什么使用分组？
- 提高可读性：分组使项目结构更清晰，便于团队协作。
- 避免路径污染：不希望某些文件夹名出现在最终的路由中。
二、下划线 _ 前缀的文件：布局（Layout）
什么是布局文件？
- 语法：
_layout.tsx - 作用：定义当前目录及其子目录中的公共布局。
示例解析：
-
根目录的
_layout.tsx：- 作用：应用于整个应用的全局布局，如头部导航、全局状态。
-
(tabs)/_layout.tsx：- 作用：仅应用于
tabs分组内的页面，如底部标签栏。
- 作用：仅应用于
布局文件的优势：
- 代码复用：避免在每个页面重复相同的布局代码。
- 一致性：确保应用内的页面遵循统一的设计风格。
三、加号 + 前缀的文件：特殊路由和配置
特殊文件的用途
- 语法：
+filename.tsx - 作用：用于定义特殊的全局配置或页面，不对应常规的路由。
常见的特殊文件：
-
+html.tsx- 作用：自定义 Web 版本应用的根 HTML 模板。
- 使用场景：需要修改默认的 HTML 结构，添加自定义元标签或脚本时。
-
+not-found.tsx- 作用：定义全局的 404 页面。
- 触发条件：当用户访问不存在的路由时显示。
为什么需要特殊文件？
- 灵活性：允许开发者自定义全局行为和配置。
- 用户体验：提供友好的错误页面，提升用户满意度。
四、常规页面组件
页面文件的命名规则
-
index.tsx- 作用：作为所在目录的默认页面。
- 路由：对应父级路径或根路径。
-
explore.tsx- 作用：定义名为
explore的页面组件。 - 路由：对应
/explore路径。
- 作用：定义名为
示例解析：
-
(tabs)/index.tsx- 路由：由于
tabs是分组，不影响路径，因此index.tsx对应/。
- 路由：由于
-
(tabs)/explore.tsx- 路由：对应
/explore，与根目录下的_layout.tsx组合，继承了全局布局。
- 路由：对应
命名注意事项：
- 文件名即路径名：文件名直接决定了页面的访问路径。
- 避免冲突：确保不同目录下的文件名唯一，避免路由冲突。
五、综合路由示例
目录结构与路由对应关系
less
复制代码
├── _layout.tsx // 应用全局布局
├── (tabs)
│ ├── _layout.tsx // tabs 分组内的布局（如底部导航）
│ ├── index.tsx // 路由：/
│ └── explore.tsx // 路由：/explore
├── +html.tsx // 自定义 HTML 模板
├── +not-found.tsx // 全局 404 页面
路由解析
-
/- 组件：
(tabs)/index.tsx - 布局：根目录的
_layout.tsx和(tabs)内的_layout.tsx
- 组件：
-
/explore- 组件：
(tabs)/explore.tsx - 布局：同上
- 组件：
-
不存在的路径
- 页面：
+not-found.tsx（全局 404 页面）
- 页面：
六、动态路由与通配符
动态路由
- 语法：
[param].tsx - 作用：匹配动态参数。
示例：
-
[id].tsx- 路由：匹配
/123、/abc等路径，id可通过路由参数获取。
- 路由：匹配
通配符路由
- 语法：
[...param].tsx - 作用：匹配剩余的所有路径部分。
示例：
-
[...slug].tsx- 路由：匹配
/posts/2021/10/10等多级路径。
- 路由：匹配
七、总结与最佳实践
理解命名规则的关键
- 括号
()：用于分组，组织代码，不影响路由。 - 下划线
_：定义布局，应用于当前及子目录。 - 加号
+：特殊文件或路由，全局配置或特殊页面。 - 方括号
[]：动态路由，匹配参数化路径。
提升项目质量的建议
- 合理组织代码：利用分组和布局，提升代码可读性和复用性。
- 清晰的命名：文件名应能直观反映其功能和对应的路由。
- 注重用户体验：提供定制的 404 页面和错误处理。
八、参考资源
- Expo Router 官方文档：深入了解更多命名规则和高级用法。
- React Navigation：了解导航和路由的基础知识。
通过深入理解 Expo 的文件命名规则，您可以构建结构清晰、可维护性高的 React Native 应用。这些规则不仅帮助您有效地组织代码，还确保了应用的可扩展性，为未来的开发奠定了坚实的基础。
