Expo 路由简介
Expo Router 是一个开源路由库,适用于使用 Expo 构建的 Universal React Native 应用。
Expo Router 是一个用于 React Native 和网页应用的基于文件的路由。它允许你管理应用中屏幕之间的导航,使用户能够在应用的不同部分之间无缝切换,并在多个平台(Android、iOS 和网页)上使用相同的组件。
🌐 Expo Router is a file-based router for React Native and web applications. It allows you to manage navigation between screens in your app, allowing users to move seamlessly between different parts of your app's UI, using the same components on multiple platforms (Android, iOS, and web).
它将来自网络的最佳文件系统路由概念引入到通用应用中——使你的路由可以在所有平台上工作。当一个文件被添加到 app 目录时,该文件会自动成为你的导航中的一个路由。
🌐 It brings the best file-system routing concepts from the web to a universal application — allowing your routing to work across every platform. When a file is added to the app directory, the file automatically becomes a route in your navigation.
有关 API 组件、钩子、方法等的信息,请参阅 Expo Router 参考资料。
你也可以查看以下播放列表来开始使用 Expo Router:
🌐 You can also see the following playlist to get started with Expo Router:
一个关于 Expo Router 的教程系列,从核心概念到更复杂的导航流程。
特性
🌐 Features
- 原生:基于我们强大的 React Navigation 套件 构建,Expo Router 导航默认即为原生且针对平台进行了优化。
- 可分享:你应用中的每个屏幕都可以自动生成深度链接,使应用中的任何路径都可以通过链接分享。
- 优先离线:应用会缓存并优先离线运行,当你发布新版本时会自动更新。即使没有网络连接或服务器,也能处理所有传入的本地 URL。
- 优化:在生产环境中,路由会自动进行延迟求值优化;在开发环境中,则采用延迟打包。
- 迭代:在 Android、iOS 和网页上实现通用快速刷新,同时在打包器中进行工件记忆化,以帮助你在大规模环境中快速推进。
- 通用:Android、iOS 和网页共享统一的导航结构,同时可以在路由级别下拉访问特定平台的 API。
- 可被发现的:Expo Router 支持在 web 上进行构建时的静态渲染,并且可以与原生应用进行通用链接。这意味着你的应用内容可以被搜索引擎索引。
使用不同的导航库
🌐 Using a different navigation library
你可以在你的 Expo 项目中使用任何其他导航库,比如 React Navigation。但是,如果你正在构建一个新应用,我们建议使用 Expo Router 来实现上面描述的所有功能。使用其他导航库时,你可能需要为其中一些功能(例如可分享链接或在同一项目中处理 Web 和原生导航)自行实现策略。
🌐 You can use any other navigation library, like React Navigation, in your Expo project. However, if you are building a new app, we recommend using Expo Router for all the features described above. With other navigation libraries, you might have to implement your own strategies for some of these features, such as shareable links or handling web and native navigation in the same project.
如果你想使用 React Native Navigation by Wix,它在 Expo Go 中不可用,并且尚不兼容 expo-dev-client。我们建议使用 React Navigation 的 createNativeStackNavigator 来使用 Android 和 iOS 本地导航 API。
🌐 If you are looking to use React Native Navigation by Wix, it is not available in Expo Go and is not yet compatible with expo-dev-client. We recommend using createNativeStackNavigator from React Navigation to use Android and iOS native navigation APIs.
常见问题
🌐 Common questions
Expo 路由 vs Expo vs React Native CLI
从历史上看,React Native 对应用的构建方式没有严格规定,这类似于在没有现代 Web 框架的情况下使用 React。Expo Router 是一个有明确设计理念的 React Native 框架,类似于 Remix 和 Next.js 作为仅限网页的 React 框架一样具有特定的设计理念。
🌐 Historically, React Native has been non prescriptive about how apps should be built which is similar to using React without a modern web framework. Expo Router is an opinionated framework for React Native, similar to how Remix and Next.js are opinionated frameworks for web-only React.
Expo Router 旨在将最佳的架构模式带给所有人,以确保充分利用 React Native。例如,Expo Router 的 异步路由 功能让每个人都能使用懒加载打包。以前,懒加载打包只在 Meta 用于构建 Facebook 应用时使用。
🌐 Expo Router is designed to bring the best architectural patterns to everyone, to ensure React Native is leveraged to its fullest. For example, Expo Router's Async Routes feature enables lazy bundling for everyone. Previously, lazy bundling was only used at Meta to build the Facebook app.
我可以在现有的 React Native 应用中使用 Expo Router 吗?
是的,Expo Router 是用于通用 React Native 应用的框架。由于路由与打包器之间的紧密联系,Expo Router 仅在使用 Metro 的 Expo CLI 项目中可用。幸运的是,你也可以在任何 React Native 项目中使用 Expo CLI!
🌐 Yes, Expo Router is the framework for universal React Native apps. Due to the deep connection between the router and the bundler, Expo Router is only available in Expo CLI projects with Metro. Luckily, you can use Expo CLI in any React Native project too!
基于文件的路由有什么好处?
- 文件系统是一个众所周知且易于理解的概念。更简单的心智模型使培训新团队成员和扩展应用变得更加容易。
- 让新用户上手最快的方法是让他们打开一个通用链接,根据他们是否已安装应用,链接会将其引导到应用或网站的正确页面。这种技术非常先进,通常只有能够承担制作和维护各平台一致性的公司才能使用。但借助 Expo 的基于文件的路由,你可以开箱即用这个功能!
- 重构更容易,因为你可以随意移动文件,而无需更新任何导入或路由组件。
- Expo Router 具有自动为路由进行静态类型检查的功能。这确保你只能链接到有效的路由,不能链接到不存在的路由。类型化路由还能改善重构,当链接出错时会提示类型错误。
- 异步路由(代码分割)可以提高开发速度,尤其是在大型项目中。它们还使升级更容易,因为错误被隔离到单个路由,这意味着你可以逐页增量更新或重构应用,而不是一次性完成(传统的 React Native)。
- 深层链接始终有效,适用于每个页面。这使得可以分享应用中任何内容的链接,这对于推广你的应用、收集错误报告、端到端测试、自动化截图等非常有用。
- Expo Head 使用自动链接实现深度原生集成。像快速注意、Handoff、Siri 上下文和通用链接这样的功能只需进行配置设置,无需修改代码。这使得与用户拥有的整个智能设备生态系统实现完美的垂直整合,从而带来只有通用应用(网页 ⇄ 原生)才能实现的用户体验。
- Expo Router 能够在网页上自动对每个页面进行静态渲染,实现真正的 SEO 并让你的应用内容完全可被发现。这只有通过基于文件的约定才能实现。
- Expo CLI 可以在遵循已知约定时推断出关于你的应用的许多信息。例如,我们可以针对每个路由实现自动的包拆分,或者自动为你的网站生成站点地图。而当你的应用只有一个入口点时,这是不可能的。
- 重新参与功能,如通知和主屏幕小部件,更容易集成,因为你可以简单地在应用的任何地方拦截启动和带查询参数的深度链接。
- 像在网页上一样,分析和错误报告可以轻松配置为自动包含路由名称,这对调试和理解用户行为非常有用。
我如何对我的 Expo Router 网站进行服务器渲染?
Expo Router 支持基本的静态渲染(SSG)。服务器端渲染目前需要自定义基础设施来设置。
🌐 Basic static rendering (SSG) is supported in Expo Router. Server-side rendering currently requires custom infrastructure to set up.
下一步
🌐 Next steps
了解如何快速开始使用 Expo Router。
关于如何入门以及将 Expo Router 添加到现有应用中的详细说明。
有关信息核心概念、符号模式、导航布局和常见导航模式,请从 Router 101 部分开始。
请在 GitHub 上查看示例应用的源代码。