Expo Router 介绍
编辑
Expo Router 是一个用于使用 Expo 构建的通用 React Native 应用程序的开源路由库。
Expo Router 是一个基于文件的 React Native 和 Web 应用程序路由器。它使您能够管理应用程序中屏幕之间的导航,允许用户在应用程序的 UI 不同部分之间无缝移动,使用相同的组件在多个平台上(Android、iOS 和 Web)运行。
它将网络中的最佳文件系统路由概念带入通用应用程序 — 使您的路由可以跨越每个平台工作。当将文件添加到 app 目录时,该文件会自动成为导航中的一个路由。
有关 API 组件、钩子、方法等的信息,请参见 Expo Router 参考。
您还可以查看以下播放列表以开始使用 Expo Router:
从核心概念到更复杂的导航流程的 Expo Router 教程系列。
功能
- 原生: 基于我们强大的 React Navigation 套件 构建,Expo Router 导航在默认情况下是真正的原生和平台优化。
- 可共享: 您应用程序中的每个屏幕自动可深链接。使您应用程序中的任何路由都可以通过链接共享。
- 离线优先: 应用程序被缓存并优先运行离线,在发布新版本时自动更新。处理所有传入的原生 URL,无需网络连接或服务器。
- 优化: 路由在生产中通过懒加载自动优化,在开发中则延迟打包。
- 迭代: 在 Android、iOS 和 Web 之间实现通用快速刷新,以及在打包器中实现工件记忆,以保持快速规模。
- 通用: 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 的基于文件的路由,您可以开箱即用这一功能!
- 代码重构变得更容易,因为您可以移动文件而无需更新任何导入或路由组件。
- Expo Router 能够自动静态类型化路由。这确保您只能链接到有效的路由,而不能链接到不存在的路由。类型化路由还改善了重构,因为如果链接被破坏,您将得到类型错误。
- Async Routes(打包分割)提高了开发速度,尤其是在较大的项目中。由于错误被隔离到单一路由,这也使得升级变得更容易,意味着您可以逐页逐步更新或重构应用,而不是一次性全部更新(传统的 React Native)。
- 深链接始终有效,适用于每个页面。这使得能够共享应用中任何内容的链接,对于推广您的应用、收集错误报告、E2E 测试、自动截图等非常有用。
- Expo Head 使用自动链接启用深层原生集成。像快速笔记、接力、Siri 上下文和通用链接这样功能只需配置设置,无需代码更改。这实现了与用户拥有的整套智能设备生态系统的完美垂直整合,从而导致只有通用应用(web ⇄ native)才能提供的用户体验。
- Expo Router 具备在 Web 上自动静态渲染每一页的能力,使得真实 SEO 和您应用内容的完全可发现成为可能。这仅因为基于文件的约定才得以实现。
- Expo CLI 在遵循已知约定时能够推测出有关您应用的很多信息。例如,我们可以实现每条路由的自动打包分割,或自动为您的网站生成一个网站地图。当您的应用只有一个入口点时,这是不可能的。
- 像通知和主屏幕小部件等重新参与功能更容易集成,因为您可以简单地拦截启动和深链接,带查询参数,随处在应用中实现。
- 就像在 Web 上,分析和错误报告可以很容易配置为自动包含路由名称,这对调试和理解用户行为非常有用。
下一步
了解如何快速开始使用 Expo Router。
详细说明如何开始并将 Expo Router 添加到现有应用程序。
有关核心概念、符号模式、导航布局和常见导航模式的信息,请从路由器 101 部分开始。
查看 GitHub 上示例应用的源代码。