Expo Router 文件路由的核心概念

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

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

Expo Router 的规则

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

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

因此，app 目录中的目录将相关屏幕组合在一起，定义为栈、选项卡或其他排列方式。

2. 所有页面都有 URL

所有页面都有与 app 目录中文件位置相匹配的 URL 路径，可以用于在网页地址栏中导航到该页面，或作为原生移动应用中的特定深层链接。这就是 Expo Router 支持“通用深层链接”的含义。您的应用中的所有页面都可以通过 URL 进行导航，无论平台如何。

3. 首先的 index.tsx 是初始路由

使用 Expo Router，您不需要在代码中定义初始路由或第一个屏幕。相反，当您打开应用时，Expo Router 将查找与 / URL 匹配的第一个 index.tsx 文件。这可以是 app/index.tsx 文件，但不一定是。如果用户应该默认从导航树的深层部分开始，您可以使用 路由组（目录名称用括号括起来），这将不算作 URL 的一部分。如果您希望您的第一个屏幕是一个选项卡组，您可以将所有选项卡页面放入 app/(tabs) 目录，并将默认选项卡定义为 index.tsx。通过这种安排，/ URL 将直接将用户带到 app/(tabs)/index.tsx 文件。

4. 根 _layout.tsx 替代 App.jsx/tsx

每个项目应该在 app 目录中有一个 _layout.tsx 文件。此文件在应用中的任何其他路由之前呈现，您可以将可能以前放在 App.jsx 文件中的初始化代码放在这里，例如加载字体或与启动屏幕交互。

5. 非导航组件放在应用目录外

在 Expo Router 中，app 目录专门用于定义您应用的路由。您应用的其他部分，如组件、钩子、实用工具等，应放在其他顶层目录中。如果您将非路由放入 app 目录，Expo Router 将尝试将其视为路由。

另外，您可以创建一个 顶层 src 目录，并将您的路由放在 src/app 目录中，非路由组件放在 src/components、src/utils 等文件夹中。这是唯一的其他目录结构，Expo Router 将识别。

6. 本质上仍然是 React Navigation

虽然这听起来与 React Navigation 有些不同，但 Expo Router 实际上是建立在 React Navigation 之上的。您可以将 Expo Router 视为一种 Expo CLI 优化，它将您的文件结构转换为您之前在自己的代码中定义的 React Navigation 组件。

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

Expo Router 规则的应用

让我们将这些 Expo Router 的基本规则应用于快速识别以下项目文件结构的关键元素：

• app/index.tsx 是初始路由，打开应用或导航到您的网页应用根 URL 时将首先出现。
• app/home.tsx 是具有 /home 路由的页面，因此您可以在浏览器中通过 yourapp.com/home 的 URL 导航到它，或在原生应用中通过 myapp://home 导航。
• app/_layout.tsx 是根布局。您可能以前放在 App.jsx 中的任何初始化代码都应该放在这里。
• app/profile/friends.tsx 是具有 /profile/friends 路由的页面。
• TextField.tsx 和 Toolbar.tsx 不在 app 目录中，因此它们将不会被视为页面。它们将没有 URL，且不能作为导航动作的目标。然而，它们可以作为 app 目录中页面的组件使用。