Expo Router 简介

编辑页面

Expo Router 是一个开源路由库,适用于使用 Expo 构建的 Universal React Native 应用程序。


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

Expo Router 是一个用于 React Native 和 web 应用的基于文件的路由器。它允许你管理应用中屏幕之间的导航,使用户能够在应用 UI 的不同部分之间无缝切换,并在多个平台(Android、iOS 和 web)上使用相同的组件。

Expo Router 将来自 web 的最佳文件系统路由理念带入一个通用应用 — 让你的路由在每个平台上都能正常工作。当一个文件被添加到 app 目录时,该文件会自动成为你导航中的一个路由。

快速开始

1

我们建议使用 create-expo-app 创建一个新的 Expo 应用,以创建一个已经安装并配置好 Expo Router 库的项目:

Terminal
npx create-expo-app@latest --template default@sdk-55

注意: 在 SDK 55 过渡期间,不带 --template 标志的 create-expo-app@latest 会创建一个 SDK 54 项目。如果你计划在实体设备上使用 Expo Go,请使用 SDK 54 项目。否则,请使用 --template default@sdk-55 来创建一个 SDK 55 项目。

2

现在,你可以通过运行以下命令启动项目:

Terminal
npx expo start
  • 若要在移动设备上查看你的应用,我们建议从 Expo Go 开始。随着应用复杂度增加并且你需要更多控制时,你可以创建一个 development build
  • 在终端 UI 中按 w 可在网页浏览器中打开项目。按 a 可打开 Android(需要 Android Studio),或按 i 可打开 iOS(需要安装 Xcode 的 macOS)。

资源

Expo 教程

一个逐步指南,用于构建可在 Android、iOS 和 web 上运行的 Expo 应用。

Expo Router API 参考

API 组件、hooks、方法和配置选项。

Expo Router 视频播放列表

从核心概念到更复杂导航流程的教程系列。

主要特性

  • 原生:构建于我们强大的 React Navigation 套件 之上,Expo Router 导航从默认开始就是真正原生且针对平台优化的。
  • 可分享:应用中的每个屏幕都会自动支持 深度链接,使应用中的任何路由都可以通过链接分享。
  • 离线优先:应用会被缓存并以离线优先方式运行,在你发布新版本时自动更新。无需网络连接或服务器即可处理所有传入的原生 URL。
  • 已优化:路由会通过 生产环境中的懒加载评估 自动优化,并在开发环境中进行延迟打包。
  • 迭代:在 Android、iOS 和 web 上提供通用的 Fast Refresh,同时在打包器中进行产物记忆化,以帮助你在大规模项目中保持快速推进。
  • 通用:Android、iOS 和 web 共享统一的导航结构,并且可以在路由级别下沉到平台特定 API。
  • 可发现:Expo Router 在 web 上支持构建时 静态渲染,并支持原生端的 通用链接。这意味着你的应用内容可以被搜索引擎索引。

使用其他导航库

你可以在 Expo 项目中使用任何其他导航库,例如 React Navigation。但是,如果你正在构建一个新应用,我们建议使用 Expo Router 以获得上述所有特性。使用其他导航库时,你可能需要自己实现某些特性策略,例如可分享链接,或者在同一项目中同时处理 web 和原生导航。

如果你想使用 Wix 的 React Native Navigation,它在 Expo Go 中不可用,并且目前也不兼容 expo-dev-client。我们建议使用 React Navigation 中的 createNativeStackNavigator 来使用 Android 和 iOS 的原生导航 API。

常见问题

Expo Router 与 Expo 与 React Native CLI 的区别

从历史上看,React Native 对应用应该如何构建并没有给出规定,这有点像在没有现代 web 框架的情况下使用 React。Expo Router 是一个面向 React Native 的有主见框架,类似于 Remix 和 Next.js 之于仅面向 web 的 React。

Expo Router 的设计目标是把最佳的架构模式带给每个人,确保 React Native 的能力得到充分利用。例如,Expo Router 的 Async Routes 功能为所有人提供了懒打包。此前,懒打包只在 Meta 内部用于构建 Facebook 应用。

我可以在现有的 React Native 应用中使用 Expo Router 吗?

可以,Expo Router 是通用 React Native 应用的框架。由于路由器与打包器之间有着深度耦合,Expo Router 仅在使用 Metro 的 Expo CLI 项目中可用。幸运的是,你也可以在任何 React Native 项目中 使用 Expo CLI

基于文件的路由有什么好处?
  • 文件系统是一个广为人知且易于理解的概念。更简单的心智模型使得教育新成员并扩展你的应用更容易。
  • 让新用户最快上手的方式,是让他们打开一个通用链接,根据他们是否安装了应用,自动打开正确的屏幕或网站。这个技巧非常高级,通常只有能负担得起平台间一致性开发和维护的大公司才会拥有。但借助 Expo 的基于文件的路由,你可以开箱即用地获得这一功能!
  • 重构更容易,因为你可以移动文件,而无需更新任何 imports 或路由组件。
  • Expo Router 能够自动对路由进行静态类型化。这能确保你只能链接到有效路由,并且不能链接到不存在的路由。类型化路由还会在链接损坏时给出类型错误,从而改善重构体验。
  • Async Routes(代码分割)可提升开发速度,尤其是在大型项目中。它们也让升级更容易,因为错误会被隔离到单个路由,这意味着你可以逐页增量更新或重构应用,而不是像传统 React Native 那样一次性全部处理。
  • 深度链接始终有效,适用于每个页面。这使得分享应用中任何内容的链接成为可能,这对于推广应用、收集 bug 报告、E2E 测试、自动化截图等都非常有帮助。
  • Expo Head 使用自动链接来实现深度原生集成。像 Quick Notes、Handoff、Siri 上下文以及通用链接这类功能只需要配置,不需要代码改动。这使得与你的用户所拥有的整个智能设备生态系统实现完美的垂直集成成为可能,从而带来只有通用应用(web ⇄ native)才能实现的用户体验。
  • Expo Router 能够自动在 web 上静态渲染每个页面,从而实现真正的 SEO 和应用内容的完全可发现性。这只有依赖基于文件的约定才有可能。
  • Expo CLI 在应用遵循已知约定时,可以推断出大量信息。例如,我们可以实现按路由自动拆分打包,或者为你的网站自动生成站点地图。当你的应用只有单一入口点时,这是不可能的。
  • 像通知和主屏幕小组件这样的再互动功能更容易集成,因为你只需在应用任意位置拦截启动和深度链接,并附带查询参数即可。
  • 和 web 一样,分析和错误报告可以很容易地配置为自动包含路由名称,这对于调试和理解用户行为非常有用。
为什么我应该用 Expo Router 而不是 React Navigation?

Expo Router 和 React Navigation 都是来自 Expo 团队的库。我们在 React Navigation 之上构建了 Expo Router,以实现基于文件路由的优势。Expo Router 是 React Navigation 的超集,这意味着你可以在 Expo Router 中使用任何 React Navigation 组件和 API。

如果基于文件的路由不适合你的项目,你可以直接使用 React Navigation,并手动设置路由、类型和链接。

我该如何对我的 Expo Router 网站进行服务器渲染?

Expo Router 支持基本的静态渲染(SSG)。服务器端渲染目前需要自定义基础设施来搭建。

下一步

手动安装

关于如何开始并将 Expo Router 添加到你现有应用中的详细说明。

Router 101

如需了解核心概念、表示模式、导航布局以及常见导航模式,请从 Router 101 部分开始。

示例应用

在 GitHub 上查看示例应用的源代码。