概述构建 Expo 应用的开发过程,以帮助构建核心开发循环的思维模型。
如果你是 Expo 和 React Native 的新手,或者你已经接触该生态系统一段时间了,本文档将有助于你更好地了解构建 Expo 应用的开发过程。它将帮助你构建核心开发循环以及 Expo 工具如何融入其中的思维模型。
¥If you're new to Expo and React Native or you've been around the ecosystem for a while, this document will be useful to help you to better understand the development process of building an Expo app. It will help you build a mental model of the core development loop and how Expo tools fit into it.
¥Key concepts
以下概念对于理解很有价值,我们建议你在阅读本指南的其余部分以及使用 Expo 工具时回顾这些定义。
¥The following concepts are valuable to understand, and we recommend referring back to these definitions as you read through the rest of this guide and also as you use Expo tools.
这是我们用来描述使用 Expo 工具的 React Native 应用的简写术语。"Expo 应用" 可以使用来自 Expo SDK、Expo Router、Expo CLI、Continuation Native Generation、它们的组合或任何其他 Expo 工具的单个包。
¥This is a shorthand term we use for describing a React Native app that uses Expo tools. An "Expo app" can use a single package from the Expo SDK, or Expo Router, or Expo CLI, or Continuous Native Generation, a combination of them, or any other Expo tools.
我们说 "Expo 应用" 是因为使用 Expo 工具的 React Native 应用在频繁打字和大声说话时非常不方便。
¥We say "Expo app" because React Native app that uses Expo tools is incredibly inconvenient to frequently type and speak out loud.
Expo 提供了多种可以独立采用的工具和服务,因此答案取决于你选择使用哪种工具。对于 Expo 提供的大部分内容,Meta 提供的 React Native 工具都没有可比性。
¥Expo provides a variety of tools and services that can be adopted independently, so the answer depends on which tools you choose to use. For most of what Expo provides, there is no React Native tooling provided by Meta that is comparable.
Expo 是一个开源项目,为开发者提供强大的工具来帮助构建和维护任何规模的 React Native 应用。例如,Expo CLI、Expo Router 和 Expo SDK 包。所有 Expo 开源工具都完全免费使用并带有 MIT 许可证。
¥Expo is an open-source project that gives developers powerful tools to assist in building and maintaining React Native apps at any scale. For example, Expo CLI, Expo Router, and Expo SDK packages. All Expo open-source tools are entirely free to use and carry the MIT license.
Expo 应用服务 (EAS) 是一套托管服务,你可以将其与 Expo 和 React Native 项目一起使用,以:
¥Expo Application Services (EAS) is a suite of hosted services that you can use with Expo and React Native projects to:
构建、提交和更新你的应用
¥Build, submit, and update your app
围绕所有这些流程设置自动化
¥Set up automation around all of these processes
与你的团队合作
¥Collaborate with your team
EAS 解决了一系列需要物理资源的问题,例如用于提供无线更新的应用服务器和 CDN 以及用于运行构建的物理服务器。EAS 有一个慷慨的 免费计划,适用于许多学生和业余爱好项目。
¥EAS solves a set of problems that require physical resources, such as application servers and CDNs for serving over-the-air updates and physical servers for running builds. EAS has a generous free plan that will work for many student and hobby projects.
你不必使用 GitHub 来使用 git,但它在很多情况下确实有帮助。EAS 和 Expo 也是如此。
¥You don't have to use GitHub to use git, but it certainly helps for many cases. The same goes for EAS and Expo.
没有!你的 Expo 项目只是一个 React Native 应用,它只是一个原生应用。你可以使用 Fastlane 或任何你喜欢的原生构建、更新等工具。
¥Nope! Your Expo project is just a React Native app, which is just a native app. You can use Fastlane or any native build, update, and more, tools you like.
大多数 EAS 服务还允许你在自己的基础设施上运行它们,我们提供了如何完成此操作的说明。例如,自托管更新(而不是使用 EAS 更新)、在本地运行构建 或 你自己的 CI(而不是使用我们的 EAS 构建工作队列)。
¥Most EAS services also allow you to run them on your own infrastructure, and we provide instructions for how you can accomplish this. For example, self-hosting updates (rather than using EAS Update), or running builds locally or on your own CI (rather than using our EAS Build worker fleet).
对于大多数团队来说,使用 EAS 比花费工程时间和资源来获取、设置和维护其他基础设施上的服务更有意义。此外,EAS 还提供服务之间的深度集成,例如用于监控应用版本采用情况的部署页面、将更新分配给特定版本以及逐步推出这些更新,这又与 EAS Insights 的监控相关联。
¥For most teams, it makes sense to use EAS rather than spending the engineering time and resources on acquiring, setting up, and maintaining the services on other infrastructure. Additionally, EAS provides deep integration between services, such as the deployments page for monitoring app version adoption, assigning updates to specific builds, and rolling those updates out incrementally — which ties back into monitoring with EAS Insights.
没有比 Expo 更快的方法来启动 React Native 项目并在设备或模拟器上运行它,尤其是与 Snack 结合使用时。
¥There's no faster way to spin up a React Native project and run it on your device or emulator than Expo Go, especially when combined with Snack.
但是,Expo Go 和 Snack 不适用于构建生产应用。当你开始项目或原型时,它们非常有用。如果你打算将应用部署到商店,那么 开发构建 将提供更加灵活、可靠、完整的开发环境。本指南没有详细介绍 Expo Go,这是唯一提到它的部分。
¥However, Expo Go and Snack are not intended for building production apps. They are great when you're getting started on a project or for prototypes. If you plan on deploying your app to the store, then development builds will provide a more flexible, reliable, and complete development environment. This guide does not go into any detail about Expo Go, and this is the only section that mentions it.
开发版本是包含 expo-dev-client
库的应用的调试版本。它可以帮助你尽快迭代,并提供比 Expo Go 更灵活、更可靠、更完整的开发环境。你可以安装任何原生库并使用 应用配置 或通过创建 配置插件 配置或应用对 原生项目 的更改。你可以创建开发版本 locally 或使用 EAS 构建 在云中创建版本。
¥A development build is a debug build of your app that contains expo-dev-client
library. It helps you iterate as quickly as possible and provides a more flexible, reliable, and complete development environment than Expo Go. You can install any native library and configure or apply changes to a native project using app config or by creating a config plugin. You can create a development build locally or use EAS Build to create a build in the cloud.
适用于移动平台的 React Native 应用由两个相互关联的部分组成:
¥React Native apps for mobile platforms are made of two interconnected parts:
它包含你的 React 组件以及大部分(如果不是全部)应用逻辑。它与 React 网站上的应用 JavaScript 的作用或多或少相同。
¥This contains your React components and most, if not all, of your application logic. It has more or less the same role as the app JavaScript on React websites.
打包 JavaScript 应用的 Android 和 Xcode 项目充当每个平台上 JavaScript 应用的启动板。它们还处理原生组件的渲染,并提供访问特定于平台的功能以及与任何已安装的原生库集成的方法。应用配置,例如名称(显示在主屏幕上)、图标、所需权限、关联域、支持的方向等,在原生项目中配置。
¥Android and Xcode projects that bundle the JavaScript app, serve as the launchpad for the JavaScript app on each platform. They also handle the rendering of native components and provide the means to access platform-specific functionalities and integrate with any installed native libraries. App configuration, such as the name (as it appears on the home screen), icon, required permissions, associated domains, supported orientations, and so on, is configured in the native project.
与任何移动应用一样,分发给用户的应用是通过编译 ("building") Android Studio 或 Xcode 项目创建的。
¥Like any mobile app, the application that is distributed to users is created by compiling ("building") the Android Studio or Xcode project.
当你使用 npx create-expo-app
初始化新应用时,你将看不到任何 android 或 ios 目录。你可以 通过运行 npx expo prebuild
生成原生项目,这将初始化原生项目,然后将项目 Expo 应用配置 (app.json/app.config.js) 应用于它们。
¥When you initialize a new app with npx create-expo-app
, you will not see any android or ios directories. You can generate the native projects by running npx expo prebuild
, which will initialize the native projects and then apply the project Expo app config (app.json/app.config.js) to them.
如果你使用基于云的开发工作流程,你可能永远不需要在自己的计算机上运行预构建或安装 Android Studio 或 Xcode(尽管你可能会发现这很有用)。下面的 本地和基于云的开发工作流程 中对此进行了解释。
¥If you use a cloud-based development workflow, you may never need to run prebuild or install Android Studio or Xcode on your own machine (although you may find this useful). This is explained below in the Local and cloud-based development workflows.
默认行为鼓励在需要时使用 持续的原生生成 (CNG) 生成原生项目,这可以使升级和项目维护变得更加容易。以下三个命令或多或少会产生相同的项目:
¥The default behavior encourages the use of Continuous Native Generation (CNG) to generate the native projects when needed, which can make upgrades and project maintenance significantly easier. The following three commands result in more or less the same project:
-
npx create-expo-app MyApp && cd MyApp && npx expo prebuild
-
npx create-expo-app --template bare-minimum
-
npx react-native init MyApp && cd MyApp && npx install-expo-modules
连续原生生成 (CNG) 是构建 Expo 应用的过程,其中 本地项目 是根据 app.json 和 package.json 按需生成的,类似于从 package.json 生成 node_modules 的方式。
¥Continuous Native Generation (CNG) is a process for building an Expo app where your native projects are generated on-demand from your app.json and package.json, similar to how your node_modules are generated from your package.json.
你可以随时将 原生项目 目录(android 和 ios)添加到 .gitignore 和/或删除项目,然后在需要时使用 npx expo prebuild
从 Expo 应用配置重新生成它们。如果你使用基于云的开发工作流程,你甚至可能永远不会在自己的开发计算机上运行预构建。
¥You can add the native project directories (android and ios) to your .gitignore and/or delete the project at any time, then re-generate them from the Expo app config with npx expo prebuild
whenever required. You might never even run prebuild on your own development machine if you use a cloud-based development workflow.
使用 CNG 可以使升级到 React Native 新版本变得更加容易。它可以简化项目维护并方便设置 应用剪辑、分享扩展 和 推送通知 等复杂功能。配置插件 让这一切成为可能。了解有关 CNG 的更多信息。
¥Using CNG can make upgrading to new versions of React Native much easier. It can simplify project maintenance and facilitate setting up complex features such as App Clips, share extensions, and push notifications. This is all made possible with config plugins. Learn more about CNG.
CNG 已被证明对许多团队都有帮助。然而,它可能不是最适合你的项目,但在许多情况下这是使用 Expo 工具的完全合理的方式。
¥CNG has proven to be helpful to many teams. However, it may not be the best fit for your project and this is a perfectly reasonable way to use Expo tools in many cases.
你可以在项目中运行 npx expo prebuild
,然后直接对 android 和 ios 目录进行更改,而不是使用 Expo 应用配置。如果你决定这样做,请记住,你将无法再使用预构建重新生成项目 - 在直接进行原生更改后运行预构建将覆盖所有这些修改。
¥You can run npx expo prebuild
in the project and then make changes directly to the android and ios directories, instead of using Expo app config. If you decide to do this, then keep in mind that you won't be able to re-generate your projects using prebuild any longer — running prebuild after making native changes directly will overwrite all of those modifications.
请注意,如果你决定在某个时候移回 CNG,则可以使用 配置插件 修改原生项目配置,而无需直接修改原生项目。
¥Note that you can use config plugins to modify the native project configuration without having to modify the native projects directly, and if you decide to move back to CNG at some point.
如果你向项目添加新的原生依赖或更改 Expo 应用配置 (app.json/app.config.js) 中的项目配置,你可以运行 npx expo prebuild --clean
来重新生成原生项目目录。
¥If you add a new native dependency to your project or change the project configuration in Expo app config (app.json/app.config.js), you can run npx expo prebuild --clean
to re-generate the native project directories.
有关如何确定新依赖是否需要原生代码更改的更多信息,请参阅 确定第三方库兼容性。
¥See Determining third-party library compatibility for more information on how to determine if a new dependency requires native code changes.
无论你选择基于云的还是本地的,都不会显着改变你的开发循环。它涉及如何生成和分发 JavaScript 代码运行的应用二进制文件。每次运行新的原生构建时都可以选择基于云的开发或本地开发。
¥Whether you choose cloud-based or local doesn't significantly alter your development loop. It's about how you produce and distribute your app binaries that your JavaScript code runs against. Choosing a cloud-based or local development is a choice you can make each time you run a new native build.
使用 EAS Build 在云中编译应用就像运行单个命令一样简单,无需安装 Android Studio 或 Xcode。云构建使你可以更轻松地与其他团队成员或利益相关者共享你的应用,除其他好处外。
¥Compiling your app in the cloud with EAS Build is as easy as running a single command, no need to install Android Studio or Xcode. Cloud builds make it easier to share your app with other teammates or stakeholders, among other benefits.
要在本地编译你的应用,你需要在计算机上安装 Android Studio 和 Xcode,然后你可以从这些工具运行构建或使用 npx expo run:[android|ios]
。当你想要使用原生调试工具在物理设备或模拟器/模拟器上调试应用时,这非常有用。
¥To compile your app locally, you will need to install Android Studio and Xcode on your machine, and then you can either run the build from those tools or use npx expo run:[android|ios]
. This is most useful when you want to debug your app on a physical device or emulator/simulator using the native debugging tools.
了解有关 使用 EAS Build 的基于云的工作流程 和 本地开发 的更多信息。
¥Learn more about cloud-based workflows with EAS Build and local development.
¥Initialize and run a project
实现 与 create-expo-app
创建一个新项目 的最简单方法。创建项目后,如果你想试验或构建快速原型,可以立即在物理设备上的 Expo Go 中或在模拟器/模拟器中直接启动它。
¥The easiest way to create a new project is with create-expo-app
. After creating your project, you can immediately launch it directly in Expo Go on your physical device or in an emulator/simulator if you want to experiment or build a quick prototype.
在大多数情况下,你将创建并使用项目的开发版本。你将安装 expo-dev-client
库。可以使用 EAS Build 或在你的计算机上本地创建开发版本:
¥In most cases, you will create and use a development build of your project. You will install the expo-dev-client
library. Development builds can be created with EAS Build or locally on your machine:
了解如何使用 EAS 为你的项目创建开发版本。
了解如何使用你自己的机器、Android Studio 和 Xcode 在本地编译你的应用。
¥The core development loop
上图中描述的核心开发循环是开发应用时通常会经历的四个主要活动的循环。
¥The core development loop described in the diagram above is a cycle of four main activities that you typically go through when developing an app.
¥Write and run JavaScript code
这涉及创建组件、编写业务逻辑或从 npm 安装不需要更改原生代码的库。你在此处所做的更改将反映在你的应用中,无需与应用的原生端进行任何交互。
¥This involves creating components, writing business logic, or installing libraries from npm that don't require native code changes. The changes you make here are reflected in your app without needing any interaction with the native side of your app.
¥Update app configuration
这涉及使用应用配置文件(app.json 或 app.config.js)修改应用的配置。它包括更新应用的名称、图标、启动画面和其他属性。这些更改并不都直接影响原生项目。但是,如果你所做的更改影响原生项目,则可以使用 应用配置 修改原生项目配置或创建或使用 配置插件。有关应用配置文件中可用属性的完整列表,请参阅 应用配置参考。
¥This involves modifying your app's configuration using the app config file (app.json or app.config.js). It includes updating your app's name, icon, splash screen, and other properties. These changes don't all affect the native project directly. However, if you make changes that affect the native projects, you can use the app config to modify the native project configuration or create or use a config plugin. See app config reference for a complete list of properties available in the app config file.
¥Write native code or modify native project configuration
这包括直接编写原生代码或修改原生代码配置。你要么需要访问原生代码项目目录才能进行这些更改,要么可以使用 本地展览模块 编写原生代码。
¥This includes writing native code directly or modifying native code configuration. You either need access to the native code project directories to make these changes, or you can write native code with a local Expo Module.
¥Install a library that requires native code modifications
这包括库需要更改原生代码项目配置。该库提供配置插件或更新应用配置所需的步骤。与之前的活动一样,这也需要你创建开发版本。
¥This includes that a library requires making changes to the native code project configuration. Either the library provides a config plugin or steps to take to update the app config. Like the previous activity, this also requires you to create a development build.
创建 开发构建 时,你有两个选择。你可以使用 EAS 构建 创建基于云的构建或在本地进行。如果你选择在本地执行此操作,则可以使用 CNG,然后使用 npx expo prebuild --clean
,或者可以使用 npx expo run android|ios
或 Android Studio 和 Xcode 创建开发版本。
¥When creating a development build, you have two options. You can create a cloud-based build using EAS Build or do it locally. If you choose to do it locally, you can use CNG and then npx expo prebuild --clean
, or you can create a development build using npx expo run android|ios
or Android Studio and Xcode.
注意:在本地创建开发版本时,
npx expo run
命令将在构建应用之前生成原生目录。如果你在第一次构建后修改项目的配置或原生代码,则必须重新构建项目。再次运行npx expo prebuild
会将更改分层到现有文件的顶部。构建后也可能会产生不同的结果。为了避免这种情况,请将原生目录添加到项目的 .gitignore 并使用npx expo prebuild --clean
命令。¥Note: When creating a development build locally, the
npx expo run
commands will generate native directories before building your app. If you modify your project's configuration or native code after the first build, you will have to rebuild your project. Runningnpx expo prebuild
again layers the changes on the top of existing files. It may also produce different results after the build. To avoid this, add native directories to the project's .gitignore and usenpx expo prebuild --clean
command.
在应用的开发循环中,还可以在同一设备上对应用进行 安装不同的变体(开发、预览或生产) 操作。
¥During your app's development loop can also install different variants (development, preview or production) of your app on the same device.
开发循环的另一个关键部分是调试。有关调试应用的更多信息,请参阅 调试运行时问题 并了解可用的不同 调试工具。
¥Another key part of the development loop is debugging. See Debugging runtime issues for more information about debugging your app and learn about different debugging tools available.
¥Share app with testers
开发应用的下一步是与你的团队、Beta 测试人员共享你的应用,或在多个测试设备上运行它。传统方法是将应用的二进制文件上传到 Google Play Beta (Android) 或 TestFlight (iOS)。这可能是一项耗时的工作,并且一次仅限于一个活动构建(例如,在 TestFlight 的情况下)。
¥The next step to developing an app is to share your app with your team, with beta testers, or run it on multiple test devices. A traditional approach is to upload your app's binary to the Google Play Beta (Android) or TestFlight (iOS). This can be a time-consuming effort and is limited to only one active build at a time (for example, in the case of TestFlight).
如果你使用 EAS Build,我们建议你完成 内部分发 以了解有关共享你的应用以进行测试的更多信息。
¥If you are using EAS Build, we recommend going through Internal distribution to learn more about sharing your app for testing.
如果你在本地编译应用,则可以创建 本地发布构建。
¥If you compile your app locally, you can create release builds locally.
¥Release app to stores
要在应用商店上发布你的应用,你可以使用 EAS 提交。有关使用 EAS 提交的更多信息,请参阅 提交到 Google Play 商店 和 提交至苹果应用商店。
¥To release your app on the app stores, you can use EAS Submit. For more information on using EAS Submit, see Submit to Google Play Store and Submit to Apple App Store.
要在本地创建发布版本,请参阅 本地发布构建,然后通过应用商店指南提交你的应用。
¥To create a release build locally, see release builds locally and then go through the app stores guide to submit your app.
¥Monitor app in production
监控生产应用的两种方法是崩溃报告和分析。崩溃报告可帮助你了解用户在使用应用时遇到的异常或错误。你可以使用 Sentry 或 BugSnag 来启用崩溃报告。
¥Two ways to monitor your production app are crash reports and analytics. Crash reports help you learn about exceptions or errors that your users run into while using your app. You can use Sentry or BugSnag to enable crash reports.
通过分析,你可以跟踪用户如何与你的应用交互。请参阅 分析概述 了解有关 Expo 和 React Native 生态系统中可用服务的更多信息。
¥Analytics allows you to track how users interact with your app. See analytics overview to learn more about the services available in the Expo and React Native ecosystem.
¥Update the app
expo-updates
库允许你以编程方式对生产应用可用的应用 JavaScript 进行即时更新。
¥The expo-updates
library allows you to programmatically make instant updates to your app's JavaScript available to your production app.
你可以使用 EAS 更新,它为 React Native 应用中的即时更新提供一流的支持。它从全球 CDN 边缘提供更新,并为支持它们的客户端使用 HTTP/3 等现代网络协议。使用 EAS Build 的也是 为开发商量身定制。你还可以将它用于你创建的 locally 版本。
¥You can use EAS Update which provides first-class support for instant updates in a React Native app. It serves updates from the edge of a global CDN and uses modern networking protocols such as HTTP/3 for clients that support them. It is also tailored for developers who use EAS Build. You can also use it for builds you have created locally.