使用Expo开发应用程序

编辑

构建 Expo 应用程序的开发流程概述,旨在帮助建立核心开发循环的思维模型。


如果你是 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 应用服务 (EAS) 之间有什么区别?

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

Expo 应用服务 (EAS) 是一套托管服务,您可以在 Expo 和 React Native 项目中使用它来:

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

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

您不必使用 GitHub 来使用 git,但在许多情况下这确实有帮助。EAS 和 Expo 也是如此。

不!您的 Expo 项目只是一个 React Native 应用程序,它只是一个原生应用程序。您可以使用 Fastlane 或任何您喜欢的原生构建、更新等工具。

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

对于大多数团队来说,使用 EAS 比花费工程时间和资源在其他基础设施上获取、设置和维护服务更有意义。此外,EAS 提供了服务之间的深度集成,例如用于监控应用版本采用情况的部署页面,将更新分配给特定构建,并逐步推出这些更新——这与 EAS Insights 的监控相结合。

是的!我们认为 EAS 非常适合任何 React Native 项目。

没有比 Expo Go 更快的方法来启动一个 React Native 项目并在您的设备或模拟器上运行它,尤其是与 Snack 结合使用时。

然而,Expo Go 和 Snack 并不适合构建生产应用 。它们在您开始一个项目或制作原型时非常好。 如果您计划将应用部署到商店,那么 开发构建 将提供更灵活、可靠和完整的开发环境。 本指南没有详细介绍 Expo Go,这也是唯一提到它的部分。

开发构建是您应用的调试构建,包含 expo-dev-client 库。它帮助您尽可能快速地迭代,并提供比 Expo Go 更灵活、可靠和完整的开发环境。您可以安装任何原生库,并使用 应用配置 或通过创建 配置插件 来配置或应用更改到 原生项目 。您可以 本地 创建开发构建,或使用 EAS Build 在云中创建构建。

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

这部分包含您的 React 组件和您应用的大部分(如果不是全部的话)逻辑。它在 React 网站上与应用 JavaScript 的角色大致相同。

Android 和 Xcode 项目将 JavaScript 应用程序打包,作为每个平台上 JavaScript 应用程序的启动平台。它们还处理本地组件的渲染,并提供访问特定平台功能和与任何已安装的本地库集成的手段。应用程序配置,例如名称(在主屏幕上显示的名称)、图标、所需权限、关联域、支持的方向等,均在本地项目中配置。

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

当您使用 npx create-expo-app 初始化一个新应用时,您将看不到任何 androidios 目录。您可以通过运行 npx expo prebuild 来生成本地项目 ,这将初始化本地项目,然后将项目 Expo 应用配置(app.json/app.config.js)应用于它们。

如果您使用基于云的开发工作流程,您可能永远不需要在自己的机器上运行预构建或安装 Android Studio 或 Xcode(尽管您可能会发现这很有用)。这在本地和基于云的开发工作流程中有详细说明。

为什么在使用 create-expo-app 初始化项目时默认不会创建本地项目?

默认行为鼓励使用持续本地生成 (CNG)在需要时生成本地项目,这可以使升级和项目维护变得更加容易。以下三个命令产生的项目大致相同:

Terminal
npx create-expo-app 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)

连续原生生成(CNG)是构建 Expo 应用的一个过程,在该过程中,您的 原生项目 是根据您的 app.jsonpackage.json 按需生成的,类似于您的 node_modules 是如何从 package.json 生成的。

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

What if I want to edit the native project configuration in Android Studio or Xcode rather than generating the projects with prebuild?

使用 CNG 可以使升级到新版本的 React Native 变得更加容易。它可以简化项目维护,并促进设置复杂功能,例如 App Clips分享扩展推送通知 。这一切都得益于 配置插件 。了解更多关于 CNG 的信息。

CNG 已被证明对许多团队有帮助。然而,它可能并不适合您的项目,在许多情况下,使用 Expo 工具是完全合理的方式。

您可以在项目中运行 npx expo prebuild,然后直接对 androidios 目录进行更改,而不是使用 Expo 应用配置。如果您决定这样做,请记住,您将无法再使用 prebuild 重新生成您的项目——在直接进行本地更改后运行 prebuild 将覆盖所有这些修改。

请注意,您可以使用 配置插件 来修改本地项目配置,而无需直接修改本地项目,如果您决定在某个时候回到 CNG。

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

有关如何确定新依赖项是否需要本机代码更改的更多信息,请参见确定第三方库兼容性

Cloud-based and local development workflows

无论您选择基于云的还是本地的,都不会显著改变您的开发循环。关键在于您如何生成和分发您的应用程序二进制文件,以便您的 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 创建,也可以在您的机器上本地创建:

Create a development build using EAS

Learn how to a create development build for your project using EAS.

Create a development build locally

Learn how to compile your app locally using your own machine, Android Studio and Xcode.

核心开发循环

Core development loop diagram

上面图中描述的核心开发循环是一个包含四个主要活动的周期,这些活动是您在开发应用时通常会经历的。

  • 编写并运行 JavaScript 代码

    这涉及到创建组件、编写业务逻辑或从 npm 安装不需要本地代码更改的库。您在这里所做的更改会在您的应用中反映出来,而无需与应用的本地部分进行任何交互。

  • 更新应用配置

    这涉及使用应用配置文件(app.jsonapp.config.js)修改您的应用配置。它包括更新应用的名称、图标、启动画面和其他属性。这些更改并不都直接影响原生项目。然而,如果您进行的更改影响原生项目,您可以使用应用配置来修改原生项目配置,或创建或使用配置插件 。有关应用配置文件中可用属性的完整列表,请参见应用配置参考

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

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

  • 安装需要本地代码修改的库

    这意味着一个库需要对本地代码项目配置进行更改。要么库提供配置插件,要么提供更新应用配置的步骤。与之前的活动一样,这也要求您创建一个开发构建。

在创建开发构建时,您有两个选项。您可以使用 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 命令。

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

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

与测试人员共享应用

开发应用程序的下一步是与团队、测试人员共享您的应用程序,或在多个测试设备上运行它。传统的方法是将应用程序的二进制文件上传到 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 的开发者量身定制 。您也可以将其用于您本地创建的构建。