RFC：使用 Expo 和 React Native 的基于文件系统的本机路由
RFC：使用 Expo 和 React Native 的基于文件系统的本机路由
TL;博士： 新图书馆 Expo Router 正在进行中，加入 GitHub上的讨论 ！请参阅 ** 世博路由器文档** ** __**开始并了解更多信息。
动机
（跨平台）应用程序开发中最难解决的问题之一是导航。在应用程序中设置导航似乎没有正确的方法，但有很多错误的方法。构建原生导航是一个手动的、特定于平台的、艰苦的过程，几乎总是无法充分发挥其潜力（强大的 通用链接 , 应用索引 , 不可触摸 , 应用剪辑 ， ETC。）。
在频谱的另一端，您拥有构建速度快、易于理解、可发现且可扩展性极强的 Web 路由。除了手势驱动的动画
问题
让一个类 Web 系统为原生应用程序工作是非常困难的。 Native 有很多内部状态，如果不在每一步都假设很多合理的默认值，这些状态就无法用 URL 轻松表示。原生应用需要在没有服务器的情况下离线运行。原生应用程序传统上也是使用编译语言构建的，因此很难以快速且响应开发人员的方式动态解析项目的文件结构。
自以为是的解决方案
这就是 React Native 的用武之地。JavaScript/native 接口、高级捆绑技术和基于组件的架构提供了创建快速开发和快速工作流的基线要求。 优化 用于生产。
自从 2021 年 4 月 ，我一直在研究一个新的跨平台路由器，它完全基于项目的文件结构生成嵌套导航和深层链接。基于文件系统的路由器的概念对于 Web 开发人员（PHP、Next.js 等）来说并不新鲜，但它是 全新的 到移动开发。通过将这种基础范式引入移动设备，我们更接近于匹配原生应用程序中网站的可发现性和可扩展性。
目标
新的路由系统有很多应用。最重要的目标是使用嵌套的本机导航快速轻松地创建、维护和扩展应用程序。在以后的版本中，可以将更多功能分层。
可发现和可扩展
Expo Router 是一个嵌套系统，可为每个 叶路径 在应用程序中。这让用户可以立即打开应用程序的任何部分并与任何人共享。此功能对于社交媒体、新闻和电子商务等内容驱动的应用程序至关重要，实际上是任何内容驱动的应用程序。
想象一下，您想与朋友分享一张照片，因此您向他们发送了一个链接 instagram.com 并告诉他们四处搜索，直到找到您正在考虑的确切页面。这就是没有深层链接的应用程序的有效运行方式，并导致用户采用率低下。
几十年前，网络通过将每个页面与任何人都可以立即共享和访问的 URL 关联起来，解决了这个问题。我们计划通过 Expo Router 为移动应用程序带来同样的灵活性。
由于 Expo 是多平台的，您可以一次开发路线并在 iOS、Android 和 Web 上共享它们。这意味着您可以利用浏览器的内置 URL 处理来快速构建您的本机应用程序的路由。
最终我们想让所有的原生应用都支持 应用搜索和内容索引 自动地。这将使本地搜索引擎能够为您的应用程序中的内容编制索引，从而从根本上提高内容的可发现性。
离线优先且快速
与 Web 应用程序不同，原生应用程序都需要离线工作。这意味着应用程序必须能够在没有网络连接或服务器的情况下处理任何传入的 URL。
Navigation is truly native and optimized for iOS and Android
我们通过在整个框架中实施新功能来解决这个问题，包括 世博SDK 至 世博会 CLI 到 地铁捆绑器 .
最终用户体验快速且轻量级，因为路由器可以在开发和生产之间动态更改组件的加载策略——目前这只节省了 JS 执行时间，我们计划在未来添加捆绑拆分叶子节点的选项版本。利用捆绑器中的通用快速刷新、增量捆绑和多层工件记忆，开发人员体验同样快速。
数据获取和错误处理
React 最令人兴奋的部分之一是将应用程序的 UI 和数据获取划分为可重用组件的能力。
React Error Boundaries can be nested in layouts enabling users to navigate away or retry the page.
Expo Router 有能力设置 反应错误边界 对于每条路线（后续版本中的悬念边界）。这意味着您可以在整个应用程序中以一致的方式轻松处理错误和数据获取状态，并重试失败的请求。
这与在原生应用程序中处理错误的传统方法大相径庭：抛出致命错误并使应用程序崩溃而没有任何迹象表明出了什么问题。这是一种糟糕的用户体验，我们很高兴能够摆脱这种体验。
Expo Router 的初始版本只是触及了数据获取和错误处理的表面，在未来的版本中会对此进行更多介绍。我们从一开始就一直在考虑它，因为它是框架设计不可或缺的一部分，我们希望确保我们不会将开发人员锁定在未来无法处理这些功能的系统中。
例子
以下是从 React Native 最流行的导航库 React Navigation 迁移单屏应用的简单示例。
Expo Router 构建在 React Navigation 之上，可以更轻松地将现有的 React Native 应用程序迁移到基于文件系统的路由。
No boilerplate needed! Apps now have multiple static entry points which makes it possible for tooling to reason about the structure of your app and make optimizations behind the scenes.
❌ 世博路由器之前
为简洁起见，我省略了依赖安装步骤和原生 Xcode / Android Studio 步骤 在没有世博会的情况下工作时需要。此示例也没有考虑在安装导航后隐藏启动屏幕。
首先，您需要创建一个屏幕组件：
app/home.js
然后是一个导航文件：
./App.js
最后创建一个用于注册根组件的入口文件：
index.js
✅ 世博路由器后
删除 index.js 和 应用程序.js — 只需在 应用程序 目录 ，并导出一个 React 组件。该框架将通过快速刷新立即在内存中生成导航和深层链接！
app/home.js
您可以启动应用程序 npx 博览会开始 并访问 /家 在任何设备上路由。我建议使用[ 计划](https://www.npmjs.com/package/uri-scheme) 在 iOS 和 Android 上测试深层链接。您还可以导航到 /__指数 到达站点地图（仅限开发）：
Apache index throwback
正如您可以想象的那样，它可以很好地扩展并且非常易于维护。您可以根据需要创建任意数量的页面，并且该框架将以可靠的方式容纳链接结构。 请参阅此处的官方设置指南 .
在 beta 期间有一些临时的额外设置，需要使用额外的 babel 插件。这将在正式版本中消失。
如果您导航到不匹配的路由，则默认行为是具有 404-esque 响应，使用户能够导航回根路径 / — 这可以通过使用顶层来替换 深度动态路由 .
Virtual pages have a recurring theme.
征求意见
我们很高兴今天与您分享 Expo Router 的早期测试版。我们想听 您的反馈 并帮助我们突破可能的界限！
我们正在寻找有关以下内容的反馈：
- API 设计 ：特别是路由约定和布局 API。我们希望确保 API 直观且易于使用。
- 工具和工作流程 ：我们希望确保工具快速且易于使用。我们还希望确保工作流程直观且易于理解，这对于在没有 URL 栏的本机设备上导航 URL 尤其如此。
- 表现 ：我们希望确保应用程序快速可靠。我们还希望确保应用程序小巧轻便。我们目前专注于“让它工作”，“让它快速”功能，如捆绑拆分，以及未来版本中的悬念边界。基于文件系统的路由器使我们的工具能够在后台实现许多性能优化，而无需在未来进行重构。
特别感谢
如果没有一些才华横溢的开发人员的帮助，这个测试版是不可能实现的：
部分面向公众的 API 是流行的 Web 框架的本地化版本 混音 （嵌套路线）和 Next.js （文件约定）。额外的 API 灵感来自 SvelteKit （组→片段）和 红木 （错误边界类似于单元格）。剩下的一切都受到 PHP 的启发。我试图让以前使用过 React 框架的开发人员尽可能熟悉 API。
谢谢阅读
要开始使用，请参阅 世博路由器文档 .请报告错误和问题 世博路由器 GitHub 存储库 .
- 加入我们 不和谐 或者 论坛 讨论发布。
- ⭐️ 帮助我们 GitHub 上的 Expo 主演 , 提交错误报告 问题 , 或打开 讨论 有问题或建议。
- 在 Twitter 上关注我以获取更多更新： 培根糖度 .
[
埃文培根——概述
您目前无法执行该操作。您使用另一个选项卡或窗口登录。
github.com
](https://github.com/evanbacon)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
