如何使用隔离方法将 Expo 添加到原生应用

一份关于将 Expo 和 React Native 作为原生库添加，并使用隔离方法将其集成到现有（brownfield）原生应用中的指南。

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

在隔离式方案中，你的 React Native 代码是独立于原生项目进行开发和维护的。你将其打包为原生库，Android 使用 AAR，iOS 使用 XCFramework，并像其他依赖一样将其集成到原生应用中。

当你希望尽量减少 React Native 对现有原生构建流程的影响，或者原生开发与 React Native 开发由不同团队负责时，这种方案最为理想。使用这种方案后，原生开发者不需要 Node.js、Yarn 或任何 React Native 构建工具链，他们只需使用已经构建好的产物即可。

如果你想了解另一种将 React Native 直接集成到原生项目中的方案，请参阅 集成式方案指南。

前提条件

要将 React Native 集成到现有应用中，你需要先搭建 JavaScript 开发环境。这包括安装用于运行 Expo CLI 的 Node.js，以及用于管理项目 JavaScript 依赖的 Yarn。

• Node.js (LTS): 用于执行 JavaScript 代码和 Expo CLI 的运行时。
• Yarn: 用于安装和管理 JavaScript 依赖的包管理器。

更多信息请参阅 环境搭建指南。

设置 Expo 项目

{
  "expo": {
    "plugins": ["expo-brownfield"]
  }
}

{
  "expo": {
    "plugins": [
      [
        "expo-brownfield",
        {
          "ios": {
            "targetName": "MyBrownfield",
            "bundleIdentifier": "com.example.mybrownfield"
          },
          "android": {
            "libraryName": "mybrownfield",
            "group": "com.example",
            "package": "com.example.mybrownfield",
            "version": "1.0.0"
          }
        }
      ]
    ]
  }
}

将 Expo 项目导出为原生库

完成 Expo 项目设置后，使用 expo-brownfield CLI 将你的 React Native 代码构建为 Android 的 AAR 和 iOS 的 XCFramework。

集成到你的原生应用中

在构建好产物后，你现在可以将它们集成到现有原生应用中。具体步骤将取决于你的项目结构和构建系统，但整体流程包括将预构建产物作为依赖添加进去，并初始化 React Native host。

dependencies {
  implementation("com.username.myproject:brownfield:1.0.0")
}

dependencyResolutionManagement {
  repositories {
    google()
    mavenCentral()
    mavenLocal()
  }
}

import android.os.Bundle
import com.example.brownfield.BrownfieldActivity
import com.example.brownfield.showReactNativeFragment

class ExpoActivity : BrownfieldActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    showReactNativeFragment()
  }
}

<activity
  android:name=".ExpoActivity"
  android:theme="@style/Theme.AppCompat.Light.NoActionBar"
  android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
/>

startActivity(Intent(this, ExpoActivity::class.java))

import UIKit
import MyAppBrownfield // 将其替换为你的 target 名称

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    ReactNativeHostManager.shared.initialize()
    return true
  }
}

import UIKit
import MyAppBrownfield

class ViewController: UIViewController {
  @IBAction func openReactNative(_ sender: Any) {
    let rnViewController = ReactNativeViewController(moduleName: "main")
    navigationController?.pushViewController(rnViewController, animated: true)
  }
}

let rnViewController = ReactNativeViewController(
  moduleName: "main",
  initialProps: ["userId": "123"],
  launchOptions: [:]
)

import SwiftUI
import MyAppBrownfield

struct ContentView: View {
  @State private var showReactNative = false

  var body: some View {
    Button("打开 React Native") {
      showReactNative = true
    }
    .fullScreenCover(isPresented: $showReactNative) {
      ReactNativeView(moduleName: "main")
    }
  }
}

测试你的集成

你已经完成了将 React Native 集成到应用中的所有基础步骤。现在是时候测试一下了。具体流程取决于你运行的是 debug 还是 release 构建。

开发（debug 构建）

现在在 React Native 目录中运行以下命令，以启动 Metro bundler

然后，从 Android Studio 或 Xcode 构建并运行原生应用。当你进入 React Native 屏幕时，它会从 Metro 开发服务器加载，并支持热重载。

生产（release 构建）

在 release 构建中，JavaScript bundle 会嵌入到产物（AAR 或 XCFramework）中，因此不需要 Metro 服务器。以 Release 配置构建原生应用，并确认 React Native 屏幕能够正确加载。

下一步