中文网
🌐 Nodejs.cn
首页指南EAS参考教程

在现有的 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 模块：自动或手动。

🌐 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.

Terminal
# Install and configure the expo package automatically
- npx install-expo-modules@latest
  • 当命令成功执行时，你将能够在你的应用中添加任何 Expo 模块！请前往 使用说明 获取更多信息。
  • 如果命令失败，请按照手动安装说明进行操作。通过编程方式更新代码可能比较棘手，如果你的项目与默认的 React Native 项目有较大差异，那么你需要手动安装并将此处的说明适配到你的代码库中。

手动安装

🌐 Manual installation

以下说明适用于在 React Native 0.81 中安装最新版本的 Expo 模块。对于以前的版本，请查看 native 升级助手 以了解这些文件的自定义方式。

🌐 The following instructions apply to installing the latest version of Expo modules in React Native 0.81. For previous versions, check the native upgrade helper to see how these files are customized.

Terminal
- npm install expo

安装完成后，应用以下差异中的更改来配置你项目中的 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

Configuration for iOS

Optionally, you can also add additional delegate methods to your AppDelegate.swift. 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.swift.

Save all of your changes and update your iOS Deployment Target in Xcode to iOS 15.1:

  • Open your-project-name.xcworkspace in Xcode, select your project in the left sidebar.
  • Select Targets > your-project-name > Build Settings > iOS Deployment Target and set it to iOS 15.1.

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:

Terminal
# Install pods
- npx pod-install

# Alternatively, the run command will install them for you
- npx expo run:ios

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

🌐 Configure Expo CLI for bundling on Android and iOS

我们建议使用 Expo CLI 及相关工具配置来打包你的应用 JavaScript 代码和资源。这将支持在 package.json 中使用 "main" 字段来使用 Expo Router 库。不使用 Expo CLI 进行打包可能会导致意外行为。了解有关 Expo CLI 的更多信息。

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

在你的 babel.config.js 中使用 babel-preset-expo
在你的 metro.config.js 中扩展 expo/metro-config
配置 Android 项目以使用 Expo CLI 打包
配置 iOS 项目以使用 Expo CLI 打包

在 Xcode 中的 Build Phases > Bundle React Native code and images 下替换 shell 脚本为以下内容：

🌐 Replace the shell script under Build Phases > Bundle React Native code and images in Xcode with the following:

/bin/sh
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'"`

并通过对 AppDelegate.swift 做以下修改，为 package.json 中的 "main" 字段添加支持：

🌐 And add support the "main" field in package.json by making the following change to AppDelegate.swift:

ios/AppDelegate.swift
11override func bundleURL() -> URL? {
22#if DEBUG
3 RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
3 RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: ".expo/.virtual-metro-entry")
44#else
55 Bundle.main.url(forResource: "main", withExtension: "jsbundle")
66#endif
77}

用法

🌐 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
  • 然后，运行“npx expo run”，修改你的应用JavaScript代码，添加以下内容：
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-asset - 一个仅使用 JavaScript 的包，基于 expo-file-system 构建，为所有 Expo 模块提供统一的资源基础。
  • expo-constants - 提供对清单的访问。
  • expo-file-system - 与设备文件系统交互。由 expo-asset 以及许多其他 Expo 模块使用。开发者在应用代码中也常直接使用它。
  • expo-font - 在运行时加载字体。此模块是可选的，可以安全移除，但如果你在开发中使用 expo-dev-client，建议保留，并且 @expo/vector-icons 需要它。
  • expo-keep-awake - 在开发应用时防止设备进入睡眠模式。此模块是可选的，可以安全移除。

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

🌐 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.exclude 属性：

🌐 If you need to exclude native code from Expo modules you are not using, but were installed by other dependencies, you can use the expo.autolinking.exclude property in package.json:

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