在现有的原生项目中安装 Expo 模块

了解如何准备你现有的原生项目以安装和使用 Expo 模块和模块 API。

如果你的项目是一个全新的 React Native 应用 — 从一开始就主要使用 React Native 构建，那么请参阅在现有的 React Native 项目中安装 Expo 模块而不是本指南。

本指南提供了准备现有原生项目以安装和使用 Expo 模块和模块 API 的步骤。

¥This guide provides the steps to prepare your existing native project to install and use Expo modules and the module API.

先决条件

¥Prerequisites

以下说明可能不适用于所有项目。将 Expo 模块集成到现有项目的支持仍处于试验阶段。如果你遇到问题，在 GitHub 上创建问题。

你应该有一个安装并配置了 React Native 的棕地原生项目来渲染根视图。如果你还没有这个，请按照 React Native 文档中的与现有应用集成指南进行操作，然后在完成步骤后返回此处。

¥You should have a brownfield native project with React Native installed and configured to render a root view. If you don't have this yet, follow the Integration with Existing Apps guide from the React Native documentation and then come back here once you have followed the steps.

安装 `expo` 包

¥Install the expo package

将 expo 包添加到你的项目中。确保你使用的是与你项目中的 React Native 版本兼容的 expo 包版本。

¥Add the expo package to your project. Ensure you are using a version of the expo package that is compatible with the React Native version in your project.

Terminal

- npm install expo

配置原生应用

¥Configuring native apps

Android 应用

¥Android app

Add the following to the gradle.properties file in the android directory:

android/gradle.properties

Add the following to the setting.gradle file in the android directory:

android/settings.gradle

Inside the android directory, run the following command:

!!!IG1!!!

Once the above command completes, run:

!!!IG2!!!

(Optional) Complete the following steps if you would like to use lifecycle listeners in your app. If you do not set up lifecycle listeners, then additional setup will be required for each module that uses them.

4.1

If you already have a class that extends the Application class you can move to step 3. If you do not have it, we need to create one. Add a file called MainApplication.kt file to your android/app/src/main/java/com/<your-app-package> directory with the following content:

android/app/src/main/java/com/<my-app-package>/MainApplication.kt

4.2

android/app/src/main/AndroidManifest.xml

4.3

If you have your own class extending Application, you can add the following. It includes calls to ApplicationLifecycleDispatcher for handling events at the application startup and during device configuration changes.

android/app/src/main/java/com/<my-app-package>/MainApplication.kt

Override onConfigurationChanged if you have not done so already.

iOS app

Add the following to your Podfile in the ios directory:

ios/Podfile

Open your ios directory in Xcode. From the project navigator, select your project and then select your app target under TARGETS. In Build Settings, using the search bar, search for ENABLE_USER_SCRIPT_SANDBOXING. If it is not already, set its value to No.

Run pod install in the ios directory.

!!!IG3!!!

You will need to do this every time you add a dependency that uses native code.

(Optional) Complete the following if you would like to use AppDelegate subscribers. If you do not set up AppDelegate subscribers, then additional setup will be required for each module that uses them.

ios/<MyAppProject>/AppDelegate.swift

	20	newArchEnabled=true
	21
	22	hermesEnabled=true

+package <my.app.package>
+import android.app.Application
+import android.content.res.Configuration
+import com.facebook.soloader.SoLoader
+import expo.modules.ApplicationLifecycleDispatcher
+class MainApplication() : Application() {
+    override fun onCreate() {
+        super.onCreate()
+        ApplicationLifecycleDispatcher.onApplicationCreate(this)
+    }
+    override fun onConfigurationChanged(newConfig: Configuration) {
+        super.onConfigurationChanged(newConfig)
+        ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+    }
+}

   <application
       android:allowBackup="true"
+        android:name=".MainApplication"
       android:fullBackupContent="@xml/backup_rules"

  override fun onCreate() {
      super.onCreate()
+       ApplicationLifecycleDispatcher.onApplicationCreate(this)
+ }
+   override fun onConfigurationChanged(newConfig: Configuration) {
+       super.onConfigurationChanged(newConfig)
+       ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+   }

+# Expo requires
+require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
+  config = use_native_modules!()
+  # Need to be added inside the target block
+  use_expo_modules!
+  config_command = [
+    'node',
+    '--no-warnings',
+    '--eval',
+    'require(require.resolve("expo-modules-autolinking", { paths: [require.resolve("expo/package.json")] }))(process.argv.slice(1))',
+    'react-native-config',
+    '--json',
+    '--platform',
+    'ios'
+  ]
+  config = use_native_modules!(config_command)

	1	apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
	2	useExpoModules()
	3