使用 Expo Router 实现全处部署

在2017年首次接触到Exponent（Expo Go的早期名称）时，其能够快速创建美观的移动原型并即时分享全球的能力令人惊叹。与以往需要花费数周时间构建交互界面仅为分享截图的Swift开发背景相比，这种在数分钟内启动应用的理念立即获得了青睐。Exponent开创了扫描二维码即时启动原生应用的技术，但早期存在限制，例如添加自定义原生代码需要进行“eject”，二进制文件体积庞大，且工具链受限，这表明其在应用分发前沿仍有改进空间。Exponent的初衷是体现软件应有的形态：即时、可共享、跨平台，同时兼具移动应用的精美与无限潜力。

早期的Exponent本质上是一个原型工具，其局限性在于无法支持自定义原生代码的引入。原生运行时是一个单一的二进制文件，JavaScript层在每次构建时都会被替换，这意味着只有JS部分是可变的，类似于浏览器环境，这严重限制了应用的深度和功能扩展性。

为了将这种未来愿景变为现实，Expo团队致力于将Expo从单纯的原型工具转变为能够支持任何自定义原生代码的平台。Expo应用由两部分构成：一个充当高性能浏览器的原生运行时，以及一个类似于现代React网站的JavaScript层。这一转变旨在消除所有限制，使用户能够逐步采纳原生代码，而非被迫直接深入Xcode和Android Studio。

为了解决原生代码的限制，Expo开发了一种系统，其中原生运行时是根据React运行时自动生成的，该系统被称为连续原生生成，简称CNG。CNG同时解决了Expo和React Native面临的许多重大问题，特别是它使得项目升级变得极其简单，只需更新node模块并运行Expo pre-build即可。CNG的出现意味着开发者可以在不牺牲开发速度的前提下，使用任何所需的原生代码，并享受Expo的所有优势。

CNG极大地提升了开发体验，因为它允许开发者使用任何原生代码，同时保留Expo带来的开发效率。由于Expo应用是真正的原生应用，它们可以获得所有新平台特性的第一天支持，例如苹果的Liquid Glass设计语言，无需进行代码更改即可集成美丽的原生元素。

CNG使原生平台的能力被推向最大潜力。例如，最近发布的MPX Create Target工具使用户能够轻松地为iOS应用添加主屏幕小组件、分享扩展、App Clips和实时活动等。通过该工具，开发者可以为应用添加App Clip，允许用户通过URL即时打开应用，实现无缝体验，用户可以直接在应用内下载完整应用，无需访问应用商店。

在彻底改造了原生运行时之后，下一步的重点是使React框架本身也达到一流水平。React Native主要关注开发体验的原生方面，例如在原生环境中启动项目或添加TypeScript可能需要数分钟甚至更长时间，这与Web端即时的体验形成鲜明对比。正因如此，Expo for Web应运而生，它是一个专门的目标平台，致力于通用地解决这些问题，并将React框架推向极限。

Expo for Web为包括Blue Sky社交网络在内的许多应用提供支持，这些应用不仅能在Web上运行，还能在移动设备上原生运行，证明了使用Expo可以真正实现“一次编写，随处运行”的规模化生产级应用。Expo for Web功能强大，支持静态渲染以实现SEO，支持PostCSS、CSS模块、Sass、Tailwind等所有现代CSS工具，并集成了React 19的特性，如React Compiler和React Server Components。

演讲者分享了参加GitNation会议的愉快体验，提到能够站在天文馆内进行演讲，这与童年时期参观天文馆的经历形成了有趣的对比。该会议的一大亮点是演讲结束后设有讨论室，与会者可以立即就演讲内容进行交流。演讲者认为，在过去十五到二十年的演讲生涯中，这是所参加过的最好的会议场地之一。

Expo for Web的进步也极大地改善了Expo for Native和整个React Native生态系统，许多为Web编写的功能现在可以通用化运行。最近的Expo发布中引入了Expo DOM组件，用户只需在文件上标记use DOM，即可在优化的WebView内部渲染它们。此外，错误日志记录功能被重写，当出现React错误时会生成人类可读的消息，使原生开发者更容易理解Web框架的错误信息。甚至还为环境变量添加了HMR（热模块重载），无需重启开发服务器即可查看更改。

将React Native的标准设定得与Web一样高，使得Expo感觉比传统原生工具优越得多。然而，拥抱Web带来的最重要特性之一是文件驱动的路由。自诞生以来，Web一直拥有最直观的路由系统，其中托管目录中的每个文件都可以通过URL进行链接。这种经受住时间考验的系统被证明是最以人为本的导航定义方式，因此Expo Router应运而生，成为第一个用于原生和Web的通用文件驱动路由系统。

使用Expo Router，路由是通过在app目录中创建文件来定义的。Expo Router完全解决了深层链接和类型安全等整个类别的难题。在Expo Router中，所有路由默认都是完全可链接的，这在原生应用中并非标准配置，并且所有内容都是完全类型安全的，这对于TypeScript用户而言是极大的优势。

一切都完全是类型安全的，这太棒了。

尽管Expo Router相对较新，但它已经为许多出色的应用提供支持，包括在iOS趋势榜中发现的近百个应用，其中就包括赢得了谷歌Play年度应用的Partle。

尽管Expo Router等新特性非常出色，但考虑到开发者仍需完成现有工作，增量迁移变得至关重要。Web是快速发现产品市场契合度和原型化想法的绝佳方式，但如今用户大部分时间都在移动应用中度过。如果已经拥有一个经过优化、响应迅速的优秀网站，不应被迫从头开始以触达移动用户。

有了Expo，用户不必丢弃现有Web资产。最近引入的Expo DOM组件使得从仅限Web的React应用逐步迁移到通用React应用成为可能。用户只需使用useDOM标记组件，即可在优化的WebView内部渲染它们。这些组件本质上作为微型的Expo网站运行，通过移动useDOM指令，可以逐步将网站的整个部分迁移到一个精美的通用应用中。

此外，通知、触觉反馈等原生API可以从DOM组件中调用，只需将函数作为props传递给组件即可。这中间存在一个“魔术序列化桥梁”，负责在桥梁之间传递props，使得整个体验非常像一流的React集成。例如，可以轻松地绑定原生API，如苹果的新Foundation模型，免费在几行代码内实现离线LLM功能。这种方式允许将原生和ReactDOM逻辑在单一的一流通道中结合起来。

DOM组件最棒的部分在于其开箱即用的特性，所需配置极少。现代网站需要大量的打包器功能才能运行，DOM组件也不例外，但Expo会自动重用跨平台的所有现有配置，包括密钥、别名、优化和助手等。开发者最不想花费时间的部分被共享到了所有地方，任何新的打包器功能也将自动生效。通过演示应用，可以将Stock Shad CN模块和模板迁移到移动端，并使用原生导航和通知API进行测试。

能够用一行代码从 JavaScript 调用它，这非常棒。

DOM组件的优势在于其开箱即用的特性，所需配置极少。Expo会自动重用所有现有配置，确保开发者最不愿处理的打包器配置被共享到所有平台。任何新的打包器功能也将自动支持，无需额外设置。通过演示应用，可以体验将Web组件迁移到移动端，并利用原生API（如通知）的感觉。

构建出色的前端只是成功的一半，要产生影响，必须将前端与服务器连接起来。在原生开发中，这通常非常困难，导致应用外观远超其实际功能，例如苹果的Intelligence功能虽然外观惊艳，但实用性较低。因此，Expo服务器平台应运而生，它提供了安全存储机密的环境变量、用于构建无服务器端点的API路由，以及用于构建可进行服务器渲染和流式传输视图的类型安全函数的React Server Functions。

服务器平台的所有组件都是完全通用的，并且基于现有的Web API，因此看起来非常熟悉。这些组件包括用于安全存储机密的环境变量（绝不暴露给客户端）、用于构建稳定无服务器端点的API路由，以及用于构建类型安全函数的React Server Functions，这些函数能够向所有平台进行服务器渲染和流式传输视图。

此外，EAS Hosting的引入简化了网站、服务器函数和静态资产的生产部署，只需一个EAS deploy命令即可完成。EAS Hosting提供实时指标，帮助理解应用的使用情况和平台分布，并默认提供所有服务器错误的详细错误信息。例如，通过查看AI聊天机器人应用的错误日志，可以发现特定国家/地区的请求会触发错误，因为OpenAI正在阻止该区域的请求，这种可见性在原生应用中是难以获得的。

整个服务器平台被用于构建AI聊天机器人应用，该应用能够渲染复杂的交互式原生视图并将其流式传输到客户端。该项目已开源，允许用户克隆并构建自己的全栈聊天机器人应用，同时支持移动和Web。服务器平台的可组合性使用户能够创建健壮、可重用的全栈组件。例如，可以将电影卡片拆分为独立的应用，点击后可获取更多信息，这得益于服务器组件能够将服务器和客户端逻辑捆绑在一起。

通过服务器组件，可以将服务器和客户端逻辑捆绑在一起，使开发变得极其简单。演讲者甚至将整个电影应用模块整合回AI应用中，创建了一个AI超级应用，允许在提示后直接打开页面获取更多信息。Spotify卡片也被转化为一个完整的模板，集成了身份验证、缓存和搜索功能，这表明使用Expo节省下来的时间可以用于其他领域，如视频编辑。

最近，在美国取消苹果税后，演讲者能够在数分钟内构建并部署一个带有自定义支付的全栈应用到原生和Web端，并在30分钟内获得外部测试批准，这意味着该应用可通过URL向一万名用户提供服务，这非常惊人。Expo服务器平台使得服务器与客户端之间的边界消融，使用户能够无缝且安全地构建易于部署和维护的全栈应用程序。将这些工具结合起来，不仅创建了最强大的通用全栈框架，还使用户能够解决现实世界的问题，例如应用商店的发布难题。

Expo服务器平台极大地简化了服务器和客户端的界限，使用户可以轻松安全地构建全栈应用，并且易于部署和维护。在Web端，通过EAS deploy可以立即获得一个可分享的网站链接，这是部署的黄金标准。挑战在于如何将此标准带入原生应用。

部署到苹果App Store的过程非常痛苦且复杂，需要构建、签名、上传、等待处理并提交审核。但使用Expo，可以从任何计算机运行MPX Test Flight，iOS应用将被构建、签名并上传到TestFlight，无需进行临时配置、昂贵的电脑或UDID管理。用户只需在应用准备好下载时收到苹果的邮件通知即可。

通过TestFlight审核，可以在无需审核的情况下解锁对一万名用户的访问权限，这只需30分钟即可完成。最终进入App Store则需要更复杂的审核流程和元数据提交。演讲者思考，既然可以通过简单扫描解锁前100名用户而无需审核，为何更多人没有这样做？原因在于将用户添加到团队需要一个多步骤且缓慢的网站流程，涉及多轮通信，导致添加少量团队成员的难度可能高于通过完整的App Store审核。

解决这一问题的更好方法是允许工作在团队成员之间分散，使他们能够按自己的节奏推进。演讲者通过Expo原型验证了这一假设，该原型旨在简化新成员的加入流程，克服了传统网站引导的缓慢和繁琐。

原型展示了一个基于Expo Router构建的快速网站，可以查看所有应用并部署到Mac OS原生版本。该界面包含“为团队部署”和“部署到公共”两个部分。对于团队部署，只需点击“获取邀请链接”，系统就会生成一个自服务链接，此链接可提供给多达100人。

该演示网站加载分块显示，非常直观。用户可以点击进入应用的不同页面，并部署到Mac OS原生版本。对于团队邀请，点击“获取邀请链接”后会生成一个自服务链接，打开该链接后，新用户可以输入电子邮件地址并点击“加入Beta版”。

如果新用户不在苹果开发者团队中，系统会引导他们完成引导页面，告知他们将收到一封电子邮件，点击邮件后登录苹果账户，即可加入团队，这比开发者手动添加100人要高效得多。完成这一步后，用户点击“加入Beta版”，随后将收到来自苹果的TestFlight下载链接邮件。

这个自服务链接的流程非常高效，可提供给多达100人。用户输入邮箱并点击加入后，如果未加入开发者团队，会看到一个引导页面，指导其通过邮件完成Apple ID登录，从而自动加入团队。随后，用户将收到TestFlight的下载邮件。虽然仍有进步空间，但Expo正在努力实现与Web部署一样轻松的体验。

整体而言，这种简化的引导机制大大提高了用户加入测试的效率，朝着将原生部署简化到Web级别体验的目标稳步迈进。

演讲者展示了一个完全使用Expo构建的原型，该原型集成了DOM组件用于服务器函数与Apple API的交互，使用深层链接进行URL共享，甚至添加了用于主屏幕快捷操作的配置插件。该应用通过EAS deploy部署到Web，并通过MPX TestFlight部署到iOS，速度非常快。这证明了使用真实世界的工具可以解决现实世界的问题。

在Expo部署的改进下，演讲者能够轻松发布演示中的每一个应用和网站，使用户能够亲手体验到现代React Native应用的质量，而非仅凭口头描述。在短短一年内，Expo增加了后端、托管服务，并将iOS构建时间缩短了一半，并增加了TestFlight的直接部署功能。Expo正快速地向Web开发者交付高质量的原生应用，目标是让世界变得更美好。

Expo 能够构建精美、无限的应用并即时与任何人共享的愿景正迅速成为现实。

在问答环节中，关于MPX Test Flight是否有Android对应版本的问题得到解答：MPX Test Flight是EAS Build的一个别名，EAS Build是一个更全面的CLI工具，支持Android、Ad Hoc以及所有所需的组合，其魔力在于自动代码签名，它会分析代码以确保应用不会因缺少商家ID注册等问题而失败。

关于导航迁移，Expo Router是建立在React Navigation之上的，React Navigation本身是一个用于导航的API。因此，迁移过程相对简单，主要涉及删除代码，并将命令式的API重构为更具声明性的文件驱动路由系统。这表明底层的导航原语仍然存在。

对于淘汰自己开发的功能，演讲者指出，底层的React Navigation原语仍然在幕后运行和开发。这为开发者提供了自由度：如果不喜欢文件驱动的路由方式，仍然可以使用底层的原语来构建自己的系统，无需完全从头开始。

对于从Next.js或Remix等框架迁移的用户，DOM组件是关键。该功能允许将现代Web代码直接迁移。由于网站不仅涉及渲染到WebView，还涉及数据获取，Expo原生支持React Server Components和React Server Actions。DOM组件实验性地支持这些特性，这意味着使用Server Actions的Web代码可以移动到DOM组件中，并将请求转移到Server Action，从而保留相同的API优势，实现平滑的增量迁移。

关于原生可访问性支持，答案是肯定的。所有可访问性样式，如accessibility area roll等原生属性都会被暴露出来。Expo使用原生原语，除非用户明确关闭，否则应用将默认获得设备内置的所有原生可访问性功能。