This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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

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

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

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

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

设置 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 屏幕能够正确加载。

下一步