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

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

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

expo 包的体积较小；它仅包括几乎每个应用所需的最小包以及构建其他 Expo SDK 包的模块和自动链接基础设施。一旦在您的项目中安装和配置了 expo 包，您可以使用 npx expo install 来添加 SDK 中的任何其他 Expo 模块。

根据您初始化项目的方式，您可以通过两种方式安装 Expo 模块：自动或手动。

自动安装

要安装和使用 Expo 模块，最简单的方式是使用 install-expo-modules 命令。

• 当命令成功时，您将能够在您的应用中添加任何 Expo 模块！继续查看使用以获取更多信息。

• 如果命令失败，请遵循手动安装说明。 以编程方式更新代码可能比较棘手，如果您的项目与默认的 React Native 项目有显著不同，那么您需要执行手动安装并根据这里的说明调整您的代码库。

手动安装

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

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

Android 的配置

iOS 的配置

可选地，您还可以向您的 AppDelegate.swift 添加其他委托方法。一些库可能需要这些方法，因此除非您有充分的理由不添加，建议您添加它们。查看 AppDelegate.swift 中的委托方法。

保存所有更改并在 Xcode 中将您的 iOS 部署目标更新为 iOS 15.1：

• 在 Xcode 中打开 your-project-name.xcworkspace，在左侧边栏中选择您的项目。
• 选择 Targets > your-project-name > Build Settings > iOS Deployment Target 并将其设置为 iOS 15.1。

最后一步是再次安装项目的 CocoaPods，以拉取 use_expo_modules! 指令检测到的 Expo 模块，该指令已添加到 Podfile 中：

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

我们建议使用 Expo CLI 和相关工具配置来打包您的应用 JavaScript 代码和资产。这增加了在 package.json 中使用 "main" 字段以使用 Expo Router 库的支持。不使用 Expo CLI 进行打包可能会导致意外行为。了解有关 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

# 默认情况下，项目根目录比 ios 目录高一级
export PROJECT_ROOT="$PROJECT_DIR"/..

if [[ "$CONFIGURATION" = *Debug* ]]; then
  export SKIP_BUNDLING=1
fi
if [[ -z "$ENTRY_FILE" ]]; then
  # 使用打包器的入口解析设置入口 JS 文件。
  export ENTRY_FILE="$("$NODE_BINARY" -e "require('expo/scripts/resolveAppEntry')" "$PROJECT_ROOT" ios relative | tail -n 1)"
fi

if [[ -z "$CLI_PATH" ]]; then
  # 使用 Expo CLI
  export CLI_PATH="$("$NODE_BINARY" --print "require.resolve('@expo/cli')")"
fi
if [[ -z "$BUNDLE_COMMAND" ]]; then
  # 默认的 Expo CLI 打包命令
  export BUNDLE_COMMAND="export:embed"
fi

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

   override func bundleURL() -> URL? {
 #if DEBUG
-    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: ".expo/.virtual-metro-entry")
 #else
     Bundle.main.url(forResource: "main", withExtension: "jsbundle")
 #endif

使用方法

验证安装

您可以通过从 expo-constants 中记录一个值来验证安装是否成功。

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

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

使用 Expo SDK 包

一旦 expo 包在您的项目中安装和配置，您可以使用 npx expo install 来添加 SDK 中的任何其他 Expo 模块。有关更多信息，请参见 使用库。

包含在 expo 包中的 Expo 模块

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

• 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 - 防止您的设备在开发应用时进入睡眠模式。此模块是可选的，可以安全地删除。

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

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

如果您需要排除未使用的 Expo 模块的本地代码，但它们是由其他依赖项安装的，您可以在 package.json 中使用 expo.autolinking.exclude 属性：

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