在现有的 React Native 项目中安装 Expo 模块

了解如何准备现有的 React Native 项目以安装和使用任何 Expo 模块。

要在你的应用中使用 Expo 模块，你需要安装并配置 expo 包。

¥To use Expo modules in your app, you will need to install and configure the expo package.

expo 封装占地面积小；它只包含几乎每个应用所需的最小包集以及其他 Expo SDK 包构建所需要的模块和自动链接基础设施。在项目中安装并配置 expo 包后，你可以使用 npx expo install 从 SDK 添加任何其他 Expo 模块。

¥The expo package has a small footprint; it includes only a minimal set of packages that are needed in nearly every app and the module and autolinking infrastructure that other Expo SDK packages are built with. Once the expo package is installed and configured in your project, you can use npx expo install to add any other Expo module from the SDK.

根据你的 初始化项目 方式，你可以通过两种方式安装 Expo 模块：automatically 或 manually。

¥Depending on how you initialized the project, there are two ways you can install the Expo modules: automatically or manually.

自动安装

¥Automatic installation

要安装和使用 Expo 模块，最简单的启动和运行方法是使用 install-expo-modules 命令。

¥To install and use Expo modules, the easiest way to get up and running is with the install-expo-modules command.

• 命令成功后，你将能够在应用中添加任何 Expo 模块！请前往 用法 了解更多信息。

¥ When the command succeeds, you will be able to add any Expo module in your app! Proceed to Usage for more information.

• 如果命令失败，请按照手动安装说明进行操作。以编程方式更新代码可能很棘手，如果你的项目与默认的 React Native 项目有很大偏差，那么你需要执行手动安装并将此处的说明调整为你的代码库。

¥ If the command fails, please follow the manual installation instructions. Updating code programmatically can be tricky, and if your project deviates significantly from a default React Native project, then you need to perform manual installation and adapt the instructions here to your codebase.

手动安装

¥Manual installation

以下说明适用于在 React Native 0.74 中安装最新版本的 Expo 模块。

¥The following instructions apply to installing the latest version of Expo modules in React Native 0.74.

安装完成后，应用以下差异中的更改来配置项目中的 Expo 模块。这预计需要大约五分钟，你可能需要根据项目的定制程度稍作调整。

¥Once installation is complete, apply the changes from the following diffs to configure Expo modules in your project. This is expected to take about five minutes, and you may need to adapt it slightly depending on how customized your project is.

安卓配置

¥Configuration for Android

iOS 配置

¥Configuration for iOS

你还可以选择向 AppDelegate.mm 添加其他委托方法。有些库可能需要它们，因此除非你有充分的理由将它们排除在外，否则建议添加它们。请参阅 AppDelegate.mm 中的委托方法。

¥Optionally, you can also add additional delegate methods to your AppDelegate.mm. Some libraries may require them, so unless you have a good reason to leave them out, it is recommended to add them. See delegate methods in AppDelegate.mm.

保存所有更改。在 Xcode 中，将 Target → Build Settings → Deployment 下的 iOS 部署目标更新为 iOS 13.4。最后一步是再次安装项目的 CocoaPods，以引入由我们添加到 Podfile 的 use_expo_modules! 指令检测到的 Expo 模块：

¥Save all of your changes. In Xcode, update the iOS Deployment Target under Target → Build Settings → Deployment to iOS 13.4. The last step is to install the project's CocoaPods again to pull in Expo modules that are detected by use_expo_modules! directive that we added to the Podfile:

配置 Expo CLI 以在 Android 和 iOS 上进行打包

¥Configure Expo CLI for bundling on Android and iOS

我们建议使用 Expo CLI 来打包你的应用 JavaScript 代码和资源。这增加了对使用 package.json 中的 "main" 字段的支持，支持 Expo 路由。不使用 Expo CLI 进行打包可能会导致意外行为。了解有关 Expo CLI 的更多信息。

¥We recommend using Expo CLI to bundle your app JavaScript code and assets. This adds support for using the "main" field in package.json supports Expo Router. Not using Expo CLI for bundling may result in unexpected behavior. Learn more about Expo CLI.

if [[ -f "$PODS_ROOT/../.xcode.env" ]]; then
  source "$PODS_ROOT/../.xcode.env"
fi
if [[ -f "$PODS_ROOT/../.xcode.env.local" ]]; then
  source "$PODS_ROOT/../.xcode.env.local"
fi

# The project root by default is one level up from the ios directory
export PROJECT_ROOT="$PROJECT_DIR"/..

if [[ "$CONFIGURATION" = *Debug* ]]; then
  export SKIP_BUNDLING=1
fi
if [[ -z "$ENTRY_FILE" ]]; then
  # Set the entry JS file using the bundler's entry resolution.
  export ENTRY_FILE="$("$NODE_BINARY" -e "require('expo/scripts/resolveAppEntry')" "$PROJECT_ROOT" ios relative | tail -n 1)"
fi

if [[ -z "$CLI_PATH" ]]; then
  # Use Expo CLI
  export CLI_PATH="$("$NODE_BINARY" --print "require.resolve('@expo/cli')")"
fi
if [[ -z "$BUNDLE_COMMAND" ]]; then
  # Default Expo CLI command for bundling
  export BUNDLE_COMMAND="export:embed"
fi

`"$NODE_BINARY" --print "require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'"`

 - (NSURL *)getBundleURL
 {
 #if DEBUG
-  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@".expo/.virtual-metro-entry"];
 #else
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 #endif

用法

¥Usage

验证安装

¥Verifying installation

你可以通过记录 expo-constants 中的值来验证安装是否成功。

¥You can verify that the installation was successful by logging a value from expo-constants.

• 运行 npx expo install expo-constants

  ¥Run npx expo install expo-constants

• 然后，运行 npx expo run 并修改你的应用 JavaScript 代码以添加以下内容：

  ¥Then, run npx expo run and modify your app JavaScript code to add the following:

import Constants from 'expo-constants';
console.log(Constants.systemFonts);

使用 Expo SDK 包

¥Using Expo SDK packages

在项目中安装并配置 expo 包后，你可以使用 npx expo install 从 SDK 添加任何其他 Expo 模块。请参阅 使用库 了解更多信息。

¥Once the expo package is installed and configured in your project, you can use npx expo install to add any other Expo module from the SDK. See Using Libraries for more information.

expo 包中包含 Expo 模块

¥Expo modules included in the expo package

以下 Expo 模块作为 expo 包的依赖引入：

¥The following Expo modules are brought in as dependencies of the expo package:

• expo-application - 在开发中的远程日志记录中生成安装 ID。该模块是可选的，如果你不使用 expo-dev-client，则可以安全地删除该模块。

  ¥expo-application - Generates the installation id in remote logging in development. This module is optional and can be safely removed if you do not use expo-dev-client.

• expo-asset - 围绕 expo-file-system 构建的纯 JavaScript 包，为所有 Expo 模块的资源提供通用基础。

  ¥expo-asset - A JavaScript-only package that builds around expo-file-system and provides a common foundation for assets across all Expo modules.

• expo-constants - 提供对清单的访问。

  ¥expo-constants - Provides access to the manifest.

• expo-file-system - 与设备文件系统交互。被 expo-asset 和许多其他 Expo 模块使用。通常由开发者在应用代码中直接使用。

  ¥expo-file-system - Interact with the device file system. Used by expo-asset and many other Expo modules. Commonly used directly by developers in application code.

• expo-font - 在运行时加载字体。然而，该模块是可选的，可以安全地删除；如果你使用 expo-dev-client 进行开发并且 @expo/vector-icons 需要它，则建议使用。

  ¥expo-font - Load fonts at runtime. This module is optional and can be safely removed, however; it is recommended if you use expo-dev-client for development and it is required by @expo/vector-icons.

• expo-keep-awake - 防止你的设备在开发应用时进入睡眠状态。该模块是可选的，可以安全地删除。

  ¥expo-keep-awake - Prevents your device from going to sleep while developing your app. This module is optional and can be safely removed.

要排除任何这些模块，请参阅以下有关 从自动链接中排除模块 的指南。

¥To exclude any of these modules, refer to the following guide on excluding modules from autolinking.

从自动链接中排除特定模块

¥Excluding specific modules from autolinking

如果你需要排除你不使用但由其他依赖安装的 Expo 模块，你可以使用 package.json 中的 expo.autolinking 字段：

¥If you need to exclude Expo modules that you are not using but they got installed by other dependencies, you can use the expo.autolinking field in package.json:

{
  "name": "...",
  "dependencies": {},
  "expo": {
    "autolinking": {
      "exclude": ["expo-keep-awake"]
    }
  }
}

你还可以通过在平台键下使用 exclude 来排除特定平台：

¥You can also exclude a specific platform by using exclude under the platform key:

{
  "name": "...",
  "dependencies": {},
  "expo": {
    "autolinking": {
      "exclude": ["expo-font"],
      "ios": {
        "exclude": ["expo-keep-awake"]
      }
    }
  }
}