将 Expo 与现有 React Native 应用结合使用的概述

了解如何将 Expo 工具和服务与现有的 React Native 应用结合使用。


如果你有一个不使用任何 Expo 工具的 React Native 应用,你可能想知道 Expo 可以为你提供什么,为什么你可能想要使用 Expo 工具和服务,以及如何开始。

¥If you have a React Native app that doesn't use any Expo tools, you might be wondering what Expo can provide for you, why you might want to use Expo tools and services, and how to get started.

Expo 提供的所有工具和服务在任何 React Native 应用中都能很好地运行。

¥All tools and services provided by Expo work great in any React Native app.

你可以使用 EAS 快速设置专业的 CI/CD 工作流程,以构建、审核、部署和更新你的应用。Expo CLI 为使用 React Native 提供最佳命令行体验。Expo SDK 是 React Native 的扩展标准库。它为开发者提供了高质量、维护良好的原生库,这些库使用一致的 API 约定,使它们更易于学习和使用。

¥You can use EAS to get quickly set up with a professional CI/CD workflow for building, reviewing, deploying, and updating your apps. Expo CLI provides the best command-line experience for working with React Native. The Expo SDK is an extended standard library for React Native. It gives developers high-quality, well-maintained native libraries that use consistent API conventions to make them easier to learn and use.

如果你曾经为 React Native 编写过原生模块,你会惊讶地发现,使用 Expo 模块 API 提供的惯用 Swift 和 Kotlin DSL 构建和维护模块要容易得多。

¥If you've ever written a native module for React Native, you'll be surprised how much easier it is to build and maintain modules with the idiomatic Swift and Kotlin DSL provided by the Expo Modules API.

还有更多值得探索的内容,以下链接将帮助你探索可用的选项。

¥There's so much more to explore, and the links below will help you to explore the options available to you.

增量采用步骤

¥Incremental adoption steps

以下是建议的四个增量采用阶段。这些阶段通常从快速更改以改善开发者体验,到更重要的工作流程和代码库优化。

¥Below are four suggested phases of incremental adoption. These phases generally progress from quick changes to improve developer experience, to more significant workflow and codebase optimizations.

其他阶段只需要第一阶段(先决条件)。按照其说明操作后,你可以跳到与你采用 Expo 的目标最相关的工具和服务。

¥Only the first phase — prerequisites — is required by other phases. After following its instructions, you can skip to the tools and services that are most relevant to your goals in adopting Expo.

先决条件

¥Prerequisites

这些第一步是以后采用 Expo 工具和服务所必需的:

¥These first steps are required to later adopt Expo tools and services:

安装 Expo 模块

To unlock Expo capabilities, you need to install the expo package in your existing React Native project. This guide provides both automated and manual installation steps.

使用 Expo CLI

Migration to Expo CLI is a drop-in replacement for @react-native-community/cli. It provides full compatibility with all Expo tools and services. This guide explains the benefits and provides compilation commands to start your development server after installingexpo package.

React Native 的 Modal 组件

¥Quick wins

以下内容有助于改善开发体验并需要配置:

¥The following helps improving development experience and requires configuration:

使用 Expo SDK

使用 Expo SDK 提供的众多库之一,这是一组提供对原生 API 访问的广泛库。

安装 expo-dev-client

expo-dev-client provides access to Expo Go-style app launcher interface into your debug app variants. Learn how to install and configure it in your existing React Native project.

编写原生模块

使用 Expo Modules API 使用 Swift 和 Kotlin 编写原生模块。

原生项目升级助手

查看你需要对原生项目进行的所有更改的逐个文件差异,以将它们升级到下一个 Expo SDK 和 React Native 版本。

新工作流程

¥New workflows

安装应用 expo 包后,你可以使用单个命令将应用提交到应用商店或更新配置 expo-updates 库来管理应用代码的远程更新:

¥Once your app has expo package installed, you can submit your app to app stores with a single command or update configure expo-updates library to manage remote updates to you app's code:

应用分发

使用单个命令构建你的应用并将其提交到应用商店。

安装 expo-updates

Learn how to install and configure expo-updates to manage remote updates and enable PR previews.

新思维模式

¥New mindsets

以下内容有助于提高项目的长期可维护性、原生代码维护和更轻松的升级:

¥The following helps with your project's long term maintainability, native code maintenance, and easier upgrades:

采用预构建

了解如何通过按需从配置生成原生项目来简化原生项目的维护。

Expo 路由

Expo Router 是一个基于文件的路由库,具有组织导航层次结构、自动深度链接支持等优势。

常见问题

¥Common questions

How long will it take to adopt Expo in my existing React Native project?

采用 Expo 不必一步到位。你可以从快速获胜开始,然后转到更复杂的部分。你还可以根据对你的项目最有帮助的功能来选择要采用的功能。

¥Adopting Expo doesn't have to be done in one step. You can start with the quick wins and then move on to more complex parts. You can also pick and choose which features you want to adopt based on what is most helpful for your project.

What will I gain from using Expo in my React Native app?

在现有的 React Native 应用中采用 Expo 工具可以帮助你使用 Expo SDK 更快地开发,使用 CNG 简化原生代码维护和升级,使用 EAS 更新 更快地部署等等。

¥Adopting Expo tools in your existing React Native app can help you develop faster with the Expo SDK, streamline native code maintenance and upgrades with CNG, deploy faster with EAS Update, and more.

Who uses Expo?

Expo 被全球顶层公司使用,为数百万终端用户提供服务。有关更多信息,请参阅我们的 Expo 展示

¥Expo is used by top companies worldwide that serve millions of end users. For more information, see our Expo showcase.

What impact will adopting Expo have on my app's size?

expo 软件包占用空间小,因为它仅包含每个应用所需的最小模块集,以及自动链接基础设施和其他内置的 Expo SDK 库。有关如何确定应用实际大小的更多信息,请参阅 通用链接

¥The expo package has a small footprint since it only includes a minimal set of modules required in every app with autolinking infrastructure and other Expo SDK libraries that are built-in. For more information on how to determine the actual size of your app, see Understanding app size.

Why did React Native recommend using Expo?

大多数 React Native 开发者在构建应用时解决常见问题,例如实现导航、访问原生 API、升级到新版本等。这需要使用一组特定的工具和库来构建和维护你的应用 - 这意味着你正在创建自己的框架。

¥Most React Native developers solve common problems when building an app, such as implementing navigation, accessing Native APIs, upgrading to new versions, and more. This requires using a specific set of tools and libraries to build and maintain your app — which means you are creating your own framework.

Expo 通过提供一组原语并帮助你(开发者)专注于构建应用来解决这些问题。它还提供工具以在开发中更快地进行迭代。欲了解更多信息,请参阅 为什么 React Native 建议使用框架

¥Expo solves these problems by providing a set of primitives and helping you (the developer) to focus on building your app. It also offers tools to iterate faster in development. For more information, see Why React Native recommends using a framework.

Do I have to get rid of my native projects to use Expo?

默认情况下,使用 create-expo-app 创建的 Expo 项目使用 持续的原生生成 (CNG),不包含 android 和 ios 原生目录。如果你在现有的 React Native 应用中逐步采用 Expo,则不必删除这些目录。你可以使用 npx expo run:[android|ios] 作为 @react-native-community/cli 提供的命令的替代方案,在本地编译你的应用并保留原生项目的配置。

¥By default, Expo projects created with create-expo-app use Continuous Native Generation (CNG) and do not contain android and ios native directories. If you incrementally adopt Expo in your existing React Native app, you don't have to remove these directories. You can use npx expo run:[android|ios] as an alternative to commands offered by @react-native-community/cli to compile your app locally and keep the configuration of your native projects.

I use CodePush. Can I continue using it with Expo?

CodePush 将于 2025 年 3 月退役,并且与 React Native 的新架构不兼容,因此从长远来看,我们建议切换到 EAS 更新来管理应用代码的远程更新。但是,你今天就可以开始在启用 CodePush 的应用中 使用 Expo 工具,包括 Expo SDK、Expo CLI、EAS Build 等。

¥CodePush will be retired in March 2025 and is incompatible with React Native's New Architecture, so, in the long run, we recommend switching to EAS Update to manage remote updates to your app's code. However, you can start using Expo tools in your CodePush enabled app today, including the Expo SDK, Expo CLI, EAS Build, and more.

Do I have to build with EAS?

Expo 应用服务(EAS) 是深度集成的云服务,适用于 Expo 和 React Native 应用,可提供构建、测试和部署应用的工具。

¥Expo Application Services (EAS) are deeply integrated cloud services for Expo and React Native apps that provide tools to build, test, and deploy your app.

虽然我们建议使用 EAS 与你的队友顺利协作并快速分发,但你可以在本地、在你的 CI 上或以你喜欢的任何其他方式编译你的应用。

¥Although we recommend using EAS for a smooth collaboration with your teammates and fast distribution, you can compile your app locally, on your CI, or any other way you prefer.

Can I install third-party native libraries in my code?

是的,你可以安装和使用需要原生项目(android 和 ios)配置的第三方库,或者提供带有 开发构建配置插件。请参阅 使用第三方库 了解更多信息。

¥Yes, you can install and use third-party libraries that require native projects (android and ios) configuration or provides a config plugin with development builds. See Using Third-Party libraries for more information.

I use React Navigation. Do I have to use Expo Router?

你可以继续在项目中使用任何导航库。但是,我们建议使用 Expo Router 来获得 已描述这里 的所有好处。

¥You can continue using any navigation library in your project. However, we recommend using Expo Router for all the benefits described here.