Expo Router 中基于文件路由的核心概念

了解 Expo Router 的基本规则，以及它与其余代码的关系。

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

在深入了解如何使用 Expo Router 构建应用的导航树之前，我们先来理解构成 Expo Router 中基于文件路由基础的核心概念，以及 Expo Router 项目的结构可能与其他 React Native 项目有何不同。

Expo Router 的规则

1. 所有屏幕/页面都是 src/app 目录中的文件

你应用中的所有导航路由都由 src/app 目录中的文件和子目录定义。src/app 目录中的每个文件都有一个默认导出，用于定义你应用中的一个独立页面（特殊的 _layout 文件除外）。

因此，src/app 中的目录会将相关的屏幕分组在一起。

2. 所有页面都有一个 URL

所有页面都有一个与 src/app 目录中该文件位置相匹配的 URL 路径，你可以在网页浏览器的地址栏中使用它来导航到该页面，或者在原生移动应用中将其作为应用专属的深度链接。这就是 Expo Router 支持 通用深度链接 的含义。你应用中的所有页面都可以通过 URL 进行导航，而不受平台限制。

3. 第一个 index.tsx 是初始路由

使用 Expo Router 时，你不会在代码中定义初始路由或第一个屏幕。相反，当你打开应用时，Expo Router 会寻找匹配 / URL 的第一个 index.tsx 文件。在 默认模板 中，这个文件是 src/app/index.tsx。如果应用用户默认应该从导航树更深处开始，你可以使用一个 路由组（目录名被圆括号包围的目录），而它不会被计入 URL 的一部分。如果你希望第一个屏幕是一个标签页组，你可以把所有标签页页面都放在 src/app/(tabs) 目录中，并将默认标签页定义为 index.tsx。这样，/ URL 会直接将用户带到 src/app/(tabs)/index.tsx 文件。

4. 根目录 _layout.tsx 取代 App.jsx/tsx

每个项目都应该在 src/app 目录下直接包含一个 _layout.tsx 文件。这个文件会在应用中的任何其他路由之前渲染，你可以把以前可能放在 App.jsx 文件中的初始化代码放在这里，例如加载字体、设置主题提供者，或者与启动画面交互。例如，默认模板会用 ThemeProvider 包裹应用，以支持深色和浅色模式，并在这个文件中渲染 AppTabs 组件。

5. 默认模板使用平台特定的标签页

默认模板会根据平台使用两种不同的标签页实现。在 Android 和 iOS 上，标签页使用 原生标签页 渲染，它使用平台内置的标签栏，具有原生的外观和交互体验。在 web 上，标签页使用来自 expo-router/ui 的 自定义标签页 渲染，这些是无样式且灵活的组件，允许完全控制标签栏的外观。

这通过 平台特定文件扩展名 来实现。标签页组件定义在两个文件中：用于 Android 和 iOS 的 src/components/app-tabs.native.tsx，以及用于 web 的 src/components/app-tabs.tsx。Expo 的模块解析会根据平台自动选择正确的文件。采用这种模式是因为原生平台拥有系统标签栏，能够提供诸如点击回到顶部和原生动画等预期行为，而 web 需要一个符合典型网站导航模式的自定义样式标签栏。

6. 非导航组件放在 src/app 目录之外

在 Expo Router 中，src/app 目录专门用于定义应用的路由。应用的其他部分，比如组件、hooks、工具函数等等，应该放在其他目录中，例如 src/components、src/hooks 和 src/constants。如果你把一个非路由文件放在 src/app 目录中，Expo Router 会尝试把它当作路由来处理。

7. 底层仍然是 React Navigation

虽然这听起来和 React Navigation 有很大不同，但 Expo Router 实际上是建立在 React Navigation 之上的。你可以把 Expo Router 看作是 Expo CLI 的一种优化，它将你的文件结构转换为你过去在自己的代码中定义的 React Navigation 组件。

这也意味着，你通常可以参考 React Navigation 文档来了解如何设置导航样式或配置导航，因为默认的栈导航器和标签导航器使用的是完全相同的选项。

将 Expo Router 的规则应用起来

让我们把这些 Expo Router 的基础规则应用到以下项目文件结构中，快速识别关键元素：

• src/app/index.tsx 是初始路由，当你打开应用或访问网页应用的根 URL 时，它会首先显示。
• src/app/home.tsx 是一个路由为 /home 的页面，因此你可以在浏览器中使用类似 yourapp.com/home 的 URL，或者在原生应用中使用 yourapp://home 来导航到它。
• src/app/_layout.tsx 是根布局。你以前可能放在 App.jsx 中的任何初始化代码都应该放在这里。
• src/app/profile/friends.tsx 是一个路由为 /profile/friends 的页面。
• src/components/app-tabs.native.tsx 和 src/components/app-tabs.tsx 是 平台特定 的标签页组件。.native.tsx 文件用于 Android 和 iOS，而 .tsx 文件用于 web。根布局会导入这些组件来渲染标签导航器。
• src/components/text-field.tsx 和 src/components/toolbar.tsx 不在 src/app 目录中，因此它们不会被视为页面。它们没有 URL，也不能作为导航操作的目标。不过，它们可以作为组件在 src/app 目录中的页面里使用。