如何使用独立方法将 Expo 添加到原生应用

关于如何将 Expo 和 React Native 添加为本地库，并使用隔离方法将其集成到现有（棕地）本地应用中的指南。

在独立方法中，你的 React Native 代码与本地项目分开开发和维护。你将其打包为本地库，使用 Android 的 AAR 或 iOS 的 XCFramework，并像处理其他依赖一样将其集成到本地应用中。

🌐 In the isolated approach, your React Native code is developed and maintained separately from your native project. You package it as a native library, using an AAR for Android or XCFramework for iOS, and integrate it into your native app like any other dependency.

当你想要将 React Native 对现有原生构建流程的影响降到最低，或当你有原生和 React Native 开发的独立团队时，这种方法是理想的。使用这种方法，原生开发者不需要 Node.js、Yarn 或任何 React Native 构建工具，他们只需使用预构建的工件即可。

🌐 This approach is ideal when you want to minimize the impact of React Native on your existing native build process, or when you have separate teams for native and React Native development. Using this approach, native developers don't need Node.js, Yarn, or any React Native build tooling, and they can just consume pre-built artifacts.

信息 对于将 React Native 直接集成到本地项目中的替代方法，请参见 集成方法指南。

先决条件

🌐 Prerequisites

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

🌐 To integrate React Native into your existing application, you'll need to set up a JavaScript development environment. This includes installing Node.js to run Expo CLI and Yarn to manage the project's JavaScript dependencies.

• Node.js（LTS）：用于执行 JavaScript 代码和 Expo CLI 的运行时环境。
• Yarn：一个用于安装和管理 JavaScript 依赖的包管理器。

从设置环境指南了解更多信息。

🌐 Learn more from the Set up environment guide.

设置一个 Expo 项目

🌐 Set up an Expo project

{
  "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 项目导出为本地库

🌐 Export your Expo project as a native library

一旦你设置好你的 Expo 项目，使用 expo-brownfield CLI 将你的 React Native 代码构建为 Android 的 AAR 和 iOS 的 XCFrameworks。

🌐 Once you have your Expo project set up, use the expo-brownfield CLI to build your React Native code as AARs for Android and XCFrameworks for iOS.

集成到你的原生应用中

🌐 Integrate into your native app

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

🌐 With the artifacts built, you can now integrate them into your existing native app. The exact steps will depend on your project structure and build system, but the general process involves adding the pre-built artifacts as dependencies and initializing the 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 // Replace with your target name

@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("Open React Native") {
      showReactNative = true
    }
    .fullScreenCover(isPresented: $showReactNative) {
      ReactNativeView(moduleName: "main")
    }
  }
}

测试你的集成

🌐 Test your integration

你已经完成了将 React Native 集成到你的应用中的所有基本步骤。现在是测试它的时候了。具体过程将取决于你运行的是调试版本还是发布版本。

🌐 You have completed all the basic steps to integrate React Native with your application. Now it's time to test it out. The exact process will depend on whether you're running a debug or release build.

开发（调试版）

🌐 Development (debug builds)

现在在 React Native 目录中运行以下命令以启动 Metro 打包器

🌐 Now run the following command in the React Native directory to start the Metro bundler

然后，从 Android Studio 或 Xcode 构建并运行本地应用。当你导航到 React Native 界面时，它将从 Metro 开发服务器加载，并支持热重载。

🌐 Then, build and run the native app from Android Studio or Xcode. When you navigate to the React Native screen, it will load from the Metro dev server with hot reloading support.

生产（发布版本）

🌐 Production (release builds)

在发布版本中，JavaScript 包会嵌入到制品（AAR 或 XCFramework）中，因此不需要 Metro 服务器。以 Release 配置构建原生应用，并验证 React Native 界面是否正确加载。

🌐 In release builds, the JavaScript bundle is embedded in the artifact (AAR or XCFramework), so the Metro server is not needed. Build the native app in Release configuration and verify the React Native screen loads correctly.

下一步

🌐 Next steps