使用 Expo 开发应用

编辑页面

对构建 Expo 应用的开发流程进行概述,帮助建立核心开发循环的心智模型。


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

如果你刚接触 Expo 和 React Native,或者你已经在这个生态里待了一段时间,那么这份文档都会对你有所帮助,能帮助你更好地理解构建 Expo 应用的开发流程。它会帮助你建立关于核心开发循环以及 Expo 工具如何融入其中的心智模型。

关键概念

以下概念值得理解,我们建议你在阅读本指南其余部分时,以及使用 Expo 工具时,随时回头参考这些定义。

什么是“Expo 应用”?

这是我们用来描述一个_使用 Expo 工具的 React Native 应用_的简写术语。“Expo 应用”可以使用 Expo SDK 中的单个包,或者 Expo Router,或者 Expo CLI,或者 Continuous Native Generation,或者它们的组合,或其他任何 Expo 工具。

我们之所以说“Expo 应用”,是因为_使用 Expo 工具的 React Native 应用_这个说法无论是频繁输入还是大声说出来都非常不方便。

“Expo 应用”和“不使用 Expo 工具的 React Native 应用”在开发流程上有区别吗?

Expo 提供了各种可以独立采用的工具和服务,因此答案取决于你选择使用哪些工具。对于 Expo 提供的大多数内容,Meta 并没有提供可与之相比的 React Native 工具。

“Expo”和“Expo Application Services (EAS)”有什么区别?

Expo 是一个开源项目,为开发者提供强大的工具,帮助构建和维护各种规模的 React Native 应用。例如,Expo CLI、Expo Router 和 Expo SDK 包。所有 Expo 开源工具都可完全免费使用,并采用 MIT 许可证。

Expo Application Services(EAS)是一套托管服务,你可以将其与 Expo 和 React Native 项目一起使用,用于:

  • 构建、提交和更新你的应用
  • 围绕这些流程设置自动化
  • 与你的团队协作

EAS 解决了一组需要物理资源的问题,例如用于通过网络分发更新的应用服务器和 CDN,以及用于运行构建的物理服务器。EAS 提供了一个慷慨的免费计划,适用于许多学生和个人爱好项目。

你不必为了使用 git 而使用 GitHub,但在很多情况下它确实很有帮助。EAS 和 Expo 也是如此。

如果我使用 Expo 开源工具,我必须使用 EAS 吗?

不用!你的 Expo 项目本质上只是一个 React Native 应用,也就是一个原生应用。你可以使用 Fastlane 或任何你喜欢的原生构建、更新等工具。

大多数 EAS 服务也允许你在自己的基础设施上运行它们,我们也提供了如何实现这一点的说明。例如,自托管更新(而不是使用 EAS Update),或者在本地运行构建在你自己的 CI 上运行(而不是使用我们的 EAS Build worker 集群)。

对大多数团队来说,使用 EAS 比起花费工程时间和资源去获取、搭建和维护其他基础设施上的服务更合理。此外,EAS 在各项服务之间提供了深度集成,例如用于监控应用版本采用情况的部署页面,将更新分配给特定构建,以及逐步发布这些更新——这又与通过 EAS Insights 进行监控联系起来。

如果我不使用任何 Expo 开源工具,也可以使用 EAS 吗?

可以!我们认为 EAS 很适合任何 React Native 项目。

Expo Go:学生和学习者的游乐场

Expo Go 是开始使用 React Native 的最快方式,尤其是与 Snack 结合使用时。它非常适合学生和学习者理解基础知识。

然而,Expo Go 是一个受限的游乐场,不适合构建生产级项目如果你计划将应用发布到应用商店,那么 开发构建 将提供更灵活、更可靠、也更完整的开发环境。 本指南不会详细介绍 Expo Go,这也是唯一提到它的部分。

开发构建

开发构建是你的应用的调试构建,其中包含 expo-dev-client 库。它帮助你尽可能快速地迭代,并且相比 Expo Go 提供了更灵活、更可靠、也更完整的开发环境。你可以使用 app config 安装任何原生库并配置或应用对 原生项目 的更改,或者通过创建 config plugin 来实现。你可以在本地创建开发构建,也可以使用 EAS Build 在云端创建构建。

Android 和 iOS 原生项目

移动平台上的 React Native 应用由两个相互关联的部分组成:

1. 应用 JavaScript

这里包含你的 React 组件以及大部分(如果不是全部)应用逻辑。它在某种程度上与 React 网站上的应用 JavaScript 扮演着相同的角色。

2. 原生项目

Android 和 Xcode 项目会打包 JavaScript 应用,作为各个平台上 JavaScript 应用的启动入口。它们还负责处理原生组件的渲染,并提供访问平台特定功能以及与已安装原生库集成的能力。应用配置,例如名称(显示在主屏幕上的名称)、图标、所需权限、关联域、支持的屏幕方向等等,都在原生项目中进行配置。

和任何移动应用一样,分发给用户的应用是通过编译(“构建”)Android Studio 或 Xcode 项目创建的。

当你使用 npx create-expo-app 初始化一个新应用时,你不会看到任何 androidios 目录。你可以通过运行 npx expo prebuild 生成原生项目,这会初始化原生项目,然后将项目的 Expo 应用配置(app.json/app.config.js)应用到其中。

如果你使用基于云的开发工作流,那么你可能永远都不需要在自己的机器上运行 prebuild 或安装 Android Studio 或 Xcode(尽管你可能会觉得这很有用)。下面的本地和基于云的开发工作流会对此进行说明。

为什么在我用 create-expo-app 初始化项目时,默认不会创建原生项目?

默认行为鼓励在需要时使用 Continuous Native Generation(CNG)来生成原生项目,这可以让升级和项目维护变得容易得多。 以下三个命令得到的项目大致相同:

Terminal
npx create-expo-app@latest --template default@sdk-55 MyApp && cd MyApp && npx expo prebuild

npx create-expo-app --template bare-minimum

npx @react-native-community/cli@latest init MyApp && cd MyApp && npx install-expo-modules
Continuous Native Generation(CNG)

Continuous Native Generation(CNG)是一种构建 Expo 应用的流程,在这个流程中,你的原生项目会根据你的 app.jsonpackage.json 按需生成,类似于你的 node_modules 会根据你的 package.json 生成一样。

当你创建新项目时,原生项目目录(androidios)会自动加入你的 .gitignore,你可以随时删除它们,然后在需要时通过 npx expo prebuild 从 Expo 应用配置重新生成它们。如果你使用基于云的开发工作流,甚至可能从未在自己的开发机器上运行过 prebuild。

使用 CNG 可以让升级到新版本 React Native 变得容易得多。它可以简化项目维护,并促进设置复杂功能,例如 App Clipsshare extensions错误报告。这一切都要归功于 config plugins。了解更多关于 CNG 的信息。

如果我想在 Android Studio 或 Xcode 中编辑原生项目配置,而不是用 prebuild 生成项目,该怎么办?

CNG 已经被证明对许多团队都很有帮助。不过,它可能并不适合你的项目,而且在很多情况下,这也是一种完全合理的使用 Expo 工具的方式。

你可以在项目中运行 npx expo prebuild,然后直接对 androidios 目录进行修改,而不是使用 Expo 应用配置。如果你决定这样做,请记住,你将不能再使用 prebuild 重新生成项目——在直接修改原生代码后再运行 prebuild 会覆盖所有这些改动。

请注意,你可以使用 config plugins 来修改原生项目配置,而无需直接修改原生项目,并且如果你之后决定回到 CNG,也可以这样做。

我怎么知道什么时候需要再次运行 prebuild?

如果你向项目添加了新的原生依赖,或者更改了 Expo 应用配置(app.json/app.config.js)中的项目配置,你可以运行 npx expo prebuild --clean 来重新生成原生项目目录。

有关如何判断某个新依赖是否需要原生代码更改的更多信息,请参见确定第三方库兼容性

基于云和本地的开发工作流

无论你选择基于云还是本地,开发循环本身都不会发生显著变化。关键在于你如何生成和分发你的应用二进制文件,而你的 JavaScript 代码就是在这些二进制文件上运行的。选择基于云还是本地开发,是你每次运行新的原生构建时都可以做出的选择。

使用 EAS Build 在云端编译你的应用,就像运行一个命令一样简单,无需安装 Android Studio 或 Xcode。云端构建让你更容易与其他团队成员或相关方共享你的应用,此外还有其他好处

要在本地编译你的应用,你需要在机器上安装 Android Studio 和 Xcode,然后你可以直接使用这些工具运行构建,或者使用 npx expo run:[android|ios]。当你想使用原生调试工具在实体设备或模拟器/仿真器上调试应用时,这种方式最有用。

了解更多关于 使用 EAS Build 的基于云的工作流本地开发

初始化并运行项目

使用 create-expo-app 创建新项目 是最简单的方法。创建项目后,你可以立即在实体设备上的 Expo Go 中直接启动它;如果你想进行实验或快速制作原型,也可以在模拟器/仿真器中启动。

在大多数情况下,你会创建并使用项目的开发构建。你将安装 expo-dev-client 库。开发构建可以通过 EAS Build 或在本地机器上创建:

使用 EAS 创建开发构建

了解如何使用 EAS 为你的项目创建开发构建。

在本地创建开发构建

了解如何使用你自己的机器、Android Studio 和 Xcode 在本地编译你的应用。

核心开发循环

核心开发循环图

上图中描述的核心开发循环是一个由四个主要活动组成的循环,你在开发应用时通常会经历这些活动。

  • 编写并运行 JavaScript 代码

    这包括创建组件、编写业务逻辑,或者安装来自 npm 的不需要原生代码更改的库。你在这里所做的更改会直接反映到应用中,而无需与应用的原生部分进行任何交互。

  • 更新应用配置

    这包括使用应用配置文件(app.jsonapp.config.js)修改应用的配置。它包括更新应用名称、图标、启动画面和其他属性。这些更改并不会全部直接影响原生项目。不过,如果你所做的更改会影响原生项目,你可以使用 app config 来修改原生项目配置,或者创建或使用 config plugin。有关 app config 文件中可用属性的完整列表,请参见 app config reference

  • 编写原生代码或修改原生项目配置

    这包括直接编写原生代码或修改原生代码配置。你要么需要访问原生代码项目目录来进行这些更改,要么可以使用 本地 Expo Module 编写原生代码。

  • 安装需要修改原生代码的库

    这包括某个库需要对原生代码项目配置进行更改。这个库要么提供了 config plugin,要么提供了更新 app config 的步骤。与前一个活动一样,这也要求你创建开发构建。

在创建 开发构建 时,你有两个选项。你可以使用 EAS Build 创建基于云端的构建,或者在本地完成。如果你选择在本地完成,你可以使用 CNG 然后运行 npx expo prebuild --clean,或者使用 npx expo run android|ios 或 Android Studio 和 Xcode 创建开发构建。

注意:在本地创建开发构建时,npx expo run 命令会在构建应用之前生成原生目录。如果你在第一次构建后修改了项目配置或原生代码,则需要重新构建项目。再次运行 npx expo prebuild 会将更改叠加到现有文件之上。这样也可能在构建后产生不同的结果。为避免这种情况,请将原生目录添加到项目的 .gitignore 中,并使用 npx expo prebuild --clean 命令。

在应用的开发循环中,你还可以在同一设备上 安装不同变体(开发版、预览版或生产版) 的应用。

开发循环的另一个关键部分是调试。有关如何调试应用以及可用的不同 调试工具 的更多信息,请参见 调试运行时问题

与测试人员共享应用

开发应用的下一步是将应用分享给你的团队、Beta 测试人员,或者在多个测试设备上运行。传统方法是将应用的二进制文件上传到 Google Play Beta(Android)或 TestFlight(iOS)。这可能耗时较长,并且一次只能有一个活动构建(例如在 TestFlight 的情况下)。

如果你正在使用 EAS Build,我们建议阅读 内部分发 以了解更多关于如何共享应用进行测试的信息。

如果你在本地编译应用,可以在本地创建 生产构建

将应用发布到商店

要将应用发布到应用商店,你可以使用 EAS Submit。有关使用 EAS Submit 的更多信息,请参见 提交到 Google Play 商店提交到 Apple App Store

要在本地创建生产构建,请参阅相关 指南,然后按照应用商店指南提交你的应用。

监控生产环境中的应用

监控生产应用的两种方式是崩溃报告和分析。崩溃报告可以帮助你了解用户在使用应用时遇到的异常或错误。你可以使用 SentryBugSnag 来启用崩溃报告。

分析功能可以让你跟踪用户如何与你的应用交互。请参见 分析概览 以了解 Expo 和 React Native 生态系统中可用的服务。

更新应用

expo-updates 库允许你以编程方式将应用 JavaScript 的即时更新提供给你的生产应用。

你可以使用 EAS Update,它为 React Native 应用中的即时更新提供了一级支持。它从全球 CDN 的边缘节点提供更新,并对支持这些协议的客户端使用现代网络协议,例如 HTTP/3。它也专为使用 EAS Build 的开发者量身定制。你也可以将其用于你在本地创建的构建。