与现有应用程序集成

React Native 非常适合从零开始构建新的移动应用程序。然而，它也非常适合为现有原生应用程序添加单个视图或用户流程。只需几步，您就可以添加新的 React Native 功能、屏幕、视图等。

具体步骤取决于您要针对的平台。

Android (Java & Kotlin)
iOS (Objective-C and Swift)

核心概念

将 React Native 组件集成到您的 Android 应用程序中的关键在于

设置正确的目录结构。
安装必要的 NPM 依赖项。
将 React Native 添加到您的 Gradle 配置中。
为您的第一个 React Native 屏幕编写 TypeScript 代码。
使用 ReactActivity 将 React Native 与您的 Android 代码集成。
通过运行 bundler 并查看应用程序的运行情况来测试您的集成。

使用社区模板

在遵循本指南时，我们建议您使用 React Native 社区模板作为参考。该模板包含一个**最小化的 Android 应用**，将帮助您了解如何将 React Native 集成到现有的 Android 应用中。

先决条件

请遵循有关设置开发环境和使用无框架 React Native 的指南来配置您的开发环境，以构建 Android 版 React Native 应用。本指南还假设您熟悉 Android 开发基础知识，例如创建 Activities 和编辑 AndroidManifest.xml 文件。

1. 设置目录结构

为了确保顺畅的体验，请为您的集成 React Native 项目创建一个新文件夹，然后**将您现有的 Android 项目**移至 /android 子文件夹。

2. 安装 NPM 依赖项

转到根目录并运行以下命令

shell
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.83-stable/template/package.json

这将把社区模板中的 package.json 文件复制到您的项目中。

接下来，运行以下命令安装 NPM 包

npm
Yarn

shell
npm install

shell
yarn install

安装过程已创建一个新的 node_modules 文件夹。此文件夹存储构建项目所需的所有 JavaScript 依赖项。

将 node_modules/ 添加到您的 .gitignore 文件中（这里是社区默认的 .gitignore 文件）。

3. 将 React Native 添加到您的应用

配置 Gradle

React Native 使用 React Native Gradle 插件来配置您的依赖项和项目设置。

首先，让我们编辑您的 settings.gradle 文件，添加以下行（如社区模板所示）

groovy
// Configures the React Native Gradle Settings plugin used for autolinking
pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
// If using .gradle.kts files:
// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
includeBuild("../node_modules/@react-native/gradle-plugin")

// Include your existing Gradle modules here.
// include(":app")

然后，您需要打开顶级的 build.gradle 文件并包含以下行（如社区模板所示）

差异
buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
+       classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

这可以确保 React Native Gradle 插件 (RNGP) 在您的项目中可用。最后，将以下行添加到您的应用程序的 build.gradle 文件中（这是一个不同的 build.gradle 文件，通常位于您的 app 文件夹内——您可以使用社区模板文件作为参考）

差异
apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"

repositories {
    mavenCentral()
}

dependencies {
    // Other dependencies here
+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
+   // If you don't use the RNGP, you'll have to specify version manually.
+   implementation("com.facebook.react:react-android")
+   implementation("com.facebook.react:hermes-android")
}

+react {
+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
+   autolinkLibrariesWithApp()
+}

最后，打开您的应用程序 gradle.properties 文件并添加以下行（这里是社区模板文件作为参考）

差异
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+newArchEnabled=true
+hermesEnabled=true

配置您的 Manifest

首先，请确保您的 AndroidManifest.xml 文件中具有 Internet 权限

差异
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

+   <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication">
    </application>
</manifest>

然后，您需要在您的**调试** AndroidManifest.xml 文件中启用明文流量

差异
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
+       android:usesCleartextTraffic="true"
+       tools:targetApi="28"
    />
</manifest>

照常，这里是社区模板中的 AndroidManifest.xml 文件，可供参考：main 和 debug。

这是必需的，因为您的应用程序将通过 HTTP 与您的本地 bundler（Metro）进行通信。

确保仅将此添加到您的**调试** Manifest 文件中。

4. 编写 TypeScript 代码

现在我们将实际修改原生 Android 应用程序以集成 React Native。

我们将编写的第一段代码是新屏幕的实际 React Native 代码，该屏幕将集成到我们的应用程序中。

创建 `index.js` 文件

首先，在您的 React Native 项目根目录中创建一个空的 index.js 文件。

index.js 是 React Native 应用程序的起点，并且始终是必需的。它可以是一个小文件，它**import** 其他构成您的 React Native 组件或应用程序的文件，也可以包含所有必需的代码。

我们的 index.js 应如下所示（这里是社区模板文件作为参考）

js
import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('HelloWorld', () => App);

创建 `App.tsx` 文件

让我们创建一个 App.tsx 文件。这是一个TypeScript 文件，可以包含JSX 表达式。它包含我们将集成到我们的 Android 应用程序中的根 React Native 组件（链接）

tsx
import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode
              ? Colors.black
              : Colors.white,
            padding: 24,
          }}>
          <Text style={styles.title}>Step One</Text>
          <Text>
            Edit <Text style={styles.bold}>App.tsx</Text> to
            change this screen and see your edits.
          </Text>
          <Text style={styles.title}>See your changes</Text>
          <ReloadInstructions />
          <Text style={styles.title}>Debug</Text>
          <DebugInstructions />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: '600',
  },
  bold: {
    fontWeight: '700',
  },
});

export default App;

这是社区模板文件作为参考。

5. 与您的 Android 代码集成

现在我们需要添加一些原生代码来启动 React Native 运行时，并告诉它渲染我们的 React 组件。

更新您的 Application 类

首先，我们需要更新您的 Application 类以正确初始化 React Native，如下所示

Java
Kotlin

差异
package <your-package-here>;

import android.app.Application;
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactHost;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactHost;
+import com.facebook.react.defaults.DefaultReactNativeHost;
+import com.facebook.soloader.SoLoader;
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
+import java.util.List;

-class MainApplication extends Application {
+class MainApplication extends Application implements ReactApplication {
+ @Override
+ public ReactNativeHost getReactNativeHost() {
+   return new DefaultReactNativeHost(this) {
+     @Override
+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
+     @Override
+     protected String getJSMainModuleName() { return "index"; }
+     @Override
+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
+     @Override
+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
+     @Override
+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
+   };
+ }

+ @Override
+ public ReactHost getReactHost() {
+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
+ }

  @Override
  public void onCreate() {
    super.onCreate();
+   SoLoader.init(this, OpenSourceMergedSoMapping);
+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+     DefaultNewArchitectureEntryPoint.load();
+   }
  }
}

差异
// package <your-package-here>

import android.app.Application
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.soloader.SoLoader
+import com.facebook.react.soloader.OpenSourceMergedSoMapping

-class MainApplication : Application() {
+class MainApplication : Application(), ReactApplication {

+ override val reactNativeHost: ReactNativeHost =
+      object : DefaultReactNativeHost(this) {
+        override fun getPackages(): List<ReactPackage> = PackageList(this).packages
+        override fun getJSMainModuleName(): String = "index"
+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      }

+ override val reactHost: ReactHost
+   get() = getDefaultReactHost(applicationContext, reactNativeHost)

  override fun onCreate() {
    super.onCreate()
+   SoLoader.init(this, OpenSourceMergedSoMapping)
+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+     load()
+   }
  }
}

照常，这里是MainApplication.kt 社区模板文件作为参考。

创建 `ReactActivity`

最后，我们需要创建一个新的 Activity，它将继承自 ReactActivity 并托管 React Native 代码。此 Activity 将负责启动 React Native 运行时并渲染 React 组件。

Java
Kotlin

java
// package <your-package-here>;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactActivityDelegate;

public class MyReactActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "HelloWorld";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
    }
}

kotlin
// package <your-package-here>

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate

class MyReactActivity : ReactActivity() {

    override fun getMainComponentName(): String = "HelloWorld"

    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
}

照常，这里是MainActivity.kt 社区模板文件作为参考。

每当您创建新的 Activity 时，都需要将其添加到 AndroidManifest.xml 文件中。您还需要将 MyReactActivity 的主题设置为 Theme.AppCompat.Light.NoActionBar（或任何非 ActionBar 主题），否则您的应用程序将在 React Native 屏幕的顶部渲染一个 ActionBar

差异
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication">

+     <activity
+       android:name=".MyReactActivity"
+       android:label="@string/app_name"
+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
+     </activity>
    </application>
</manifest>

现在您的 Activity 已准备好运行一些 JavaScript 代码。

6. 测试您的集成

您已完成将 React Native 集成到您的应用程序中的所有基本步骤。现在我们将启动Metro bundler，将您的 TypeScript 应用程序代码打包成一个 bundle。Metro 的 HTTP 服务器在您的开发环境的 localhost 上共享 bundle 到模拟器或设备。这支持热重载。

首先，您需要创建一个 metro.config.js 文件在项目根目录中，如下所示

js
const {getDefaultConfig} = require('@react-native/metro-config');
module.exports = getDefaultConfig(__dirname);

您可以查看社区模板中的metro.config.js 文件作为参考。

配置完成后，您就可以运行 bundler 了。在项目根目录中运行以下命令

npm
Yarn

shell
npm start

shell
yarn start

现在像往常一样构建和运行您的 Android 应用。

一旦您在应用程序中进入由 React 驱动的 Activity，它应该会从开发服务器加载 JavaScript 代码并显示

在 Android Studio 中创建发布构建

您也可以使用 Android Studio 来创建您的发布构建！它与创建您先前存在的原生 Android 应用的发布构建一样快捷。

React Native Gradle 插件将负责将 JS 代码打包到您的 APK/App Bundle 中。

如果您不使用 Android Studio，则可以使用以下命令创建发布构建

cd android
# For a Release APK
./gradlew :app:assembleRelease
# For a Release AAB
./gradlew :app:bundleRelease

接下来呢？

此时，您可以像往常一样继续开发您的应用程序。请参阅我们的调试和部署文档，以了解有关使用 React Native 的更多信息。

核心概念

将 React Native 组件集成到您的 iOS 应用程序中的关键在于

设置正确的目录结构。
安装必要的 NPM 依赖项。
将 React Native 添加到您的 Podfile 配置中。
为您的第一个 React Native 屏幕编写 TypeScript 代码。
使用 RCTRootView 将 React Native 与您的 iOS 代码集成。
通过运行 bundler 并查看应用程序的运行情况来测试您的集成。

使用社区模板

在遵循本指南时，我们建议您使用 React Native 社区模板作为参考。该模板包含一个**最小化的 iOS 应用**，将帮助您了解如何将 React Native 集成到现有的 iOS 应用中。

先决条件

请遵循有关设置开发环境和使用无框架 React Native 的指南来配置您的开发环境，以构建 iOS 版 React Native 应用。本指南还假设您熟悉 iOS 开发基础知识，例如创建 UIViewController 和编辑 Podfile 文件。

1. 设置目录结构

为了确保顺畅的体验，请为您的集成 React Native 项目创建一个新文件夹，然后**将您现有的 iOS 项目**移至 /ios 子文件夹。

2. 安装 NPM 依赖项

转到根目录并运行以下命令

shell
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.83-stable/template/package.json

这将把社区模板中的 package.json 文件复制到您的项目中。

接下来，运行以下命令安装 NPM 包

npm
Yarn

shell
npm install

shell
yarn install

安装过程已创建一个新的 node_modules 文件夹。此文件夹存储构建项目所需的所有 JavaScript 依赖项。

将 node_modules/ 添加到您的 .gitignore 文件中（这里是社区默认的 .gitignore 文件）。

3. 安装开发工具

Xcode 命令行工具

安装命令行工具。在 Xcode 菜单中选择 **Settings... (或 Preferences...)**。转到 Locations 面板，然后通过在 Command Line Tools 下拉菜单中选择最新版本来安装工具。

Xcode Command Line Tools

CocoaPods

CocoaPods 是 iOS 和 macOS 开发的包管理工具。我们使用它将实际的 React Native 框架代码本地添加到您当前的项目中。

我们建议使用Homebrew 安装 CocoaPods

shell
brew install cocoapods

4. 将 React Native 添加到您的应用

配置 CocoaPods

要配置 CocoaPods，我们需要两个文件

一个 **Gemfile**，它定义了我们需要的 Ruby 依赖项。
一个 **Podfile**，它定义了如何正确安装我们的依赖项。

对于 **Gemfile**，转到您的项目根目录并运行此命令

shell
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.83-stable/template/Gemfile

这将从模板下载 Gemfile。

注意

如果您使用 Xcode 16 创建了项目，则需要更新 Gemfile，如下所示

差异
-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'cocoapods', '1.16.2'
gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
-gem 'xcodeproj', '< 1.26.0'
+gem 'xcodeproj', '1.27.0'

Xcode 16 生成项目的方式与早期版本的 Xcode 略有不同，您需要最新的 CocoaPods 和 Xcodeproj gems 才能使其正常工作。

同样，对于 **Podfile**，转到您项目的 ios 文件夹并运行

shell
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.83-stable/template/ios/Podfile

请使用社区模板作为参考点来获取Gemfile 和 Podfile。

注意

请记住更改此行。

现在，我们需要运行一些额外的命令来安装 Ruby gems 和 Pods。导航到 ios 文件夹并运行以下命令

sh
bundle install
bundle exec pod install

第一个命令将安装 Ruby 依赖项，第二个命令将实际将 React Native 代码集成到您的应用程序中，以便您的 iOS 文件可以导入 React Native 头文件。

5. 编写 TypeScript 代码

现在我们将实际修改原生 iOS 应用程序以集成 React Native。

我们将编写的第一段代码是新屏幕的实际 React Native 代码，该屏幕将集成到我们的应用程序中。

创建 `index.js` 文件

首先，在您的 React Native 项目根目录中创建一个空的 index.js 文件。

我们的 index.js 应如下所示（这里是社区模板文件作为参考）

js
import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('HelloWorld', () => App);

创建 `App.tsx` 文件

让我们创建一个 App.tsx 文件。这是一个TypeScript 文件，可以包含JSX 表达式。它包含我们将集成到我们的 iOS 应用程序中的根 React Native 组件（链接）

tsx
import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode
              ? Colors.black
              : Colors.white,
            padding: 24,
          }}>
          <Text style={styles.title}>Step One</Text>
          <Text>
            Edit <Text style={styles.bold}>App.tsx</Text> to
            change this screen and see your edits.
          </Text>
          <Text style={styles.title}>See your changes</Text>
          <ReloadInstructions />
          <Text style={styles.title}>Debug</Text>
          <DebugInstructions />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: '600',
  },
  bold: {
    fontWeight: '700',
  },
});

export default App;

这是社区模板文件作为参考。

5. 与您的 iOS 代码集成

现在我们需要添加一些原生代码来启动 React Native 运行时，并告诉它渲染我们的 React 组件。

要求

React Native 初始化现在已与 iOS 应用的任何特定部分解耦。

React Native 可以使用一个名为 RCTReactNativeFactory 的类来初始化，该类负责处理 React Native 的生命周期。

初始化该类后，您可以提供一个 UIWindow 对象来启动 React Native 视图，或者您可以要求该工厂生成一个 UIView，然后您可以将其加载到任何 UIViewController 中。

在以下示例中，我们将创建一个 ViewController，它可以加载 React Native 视图作为其 view。

创建 ReactViewController

使用模板创建一个新文件（⌘+N）并选择 Cocoa Touch Class 模板。

确保在 "Subclass of" 字段中选择 UIViewController。

ObjectiveC
Swift

现在打开 ReactViewController.m 文件并进行以下更改

ReactViewController.m
#import "ReactViewController.h"
+#import <React/RCTBundleURLProvider.h>
+#import <RCTReactNativeFactory.h>
+#import <RCTDefaultReactNativeFactoryDelegate.h>
+#import <RCTAppDependencyProvider.h>


@interface ReactViewController ()

@end

+@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
+@end

-@implementation ReactViewController
+@implementation ReactViewController {
+  RCTReactNativeFactory *_factory;
+  id<RCTReactNativeFactoryDelegate> _factoryDelegate;
+}

 - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view.
+    _factoryDelegate = [ReactNativeFactoryDelegate new];
+    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
+    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
+    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
 }

@end

+@implementation ReactNativeFactoryDelegate
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+  return [self bundleURL];
+}
+
+- (NSURL *)bundleURL
+{
+#if DEBUG
+  return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
+#else
+  return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}

@end

现在打开 ReactViewController.swift 文件并进行以下更改

ReactViewController.swift
import UIKit
+import React
+import React_RCTAppDelegate
+import ReactAppDependencyProvider

class ReactViewController: UIViewController {
+  var reactNativeFactory: RCTReactNativeFactory?
+  var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?

  override func viewDidLoad() {
    super.viewDidLoad()
+    reactNativeFactoryDelegate = ReactNativeDelegate()
+    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
+    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
+    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")

  }
}

+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
+    override func sourceURL(for bridge: RCTBridge) -> URL? {
+      self.bundleURL()
+    }
+
+    override func bundleURL() -> URL? {
+      #if DEBUG
+      RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+      #else
+      Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+      #endif
+    }
+
+}

在 rootViewController 中呈现 React Native 视图

最后，我们可以呈现我们的 React Native 视图。为此，我们需要一个新的 View Controller，它可以托管一个视图，我们可以在其中加载 JS 内容。我们已经有了初始的 ViewController，并且可以使其呈现 ReactViewController。有几种方法可以做到这一点，具体取决于您的应用程序。在本示例中，我们假设您有一个按钮可以以模态方式呈现 React Native。

ObjectiveC
Swift

ViewController.m
#import "ViewController.h"
+#import "ReactViewController.h"

@interface ViewController ()

@end

- @implementation ViewController
+@implementation ViewController {
+  ReactViewController *reactViewController;
+}

 - (void)viewDidLoad {
   [super viewDidLoad];
   // Do any additional setup after loading the view.
   self.view.backgroundColor = UIColor.systemBackgroundColor;
+  UIButton *button = [UIButton new];
+  [button setTitle:@"Open React Native" forState:UIControlStateNormal];
+  [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
+  [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
+  [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
+  [self.view addSubview:button];

+  button.translatesAutoresizingMaskIntoConstraints = NO;
+  [NSLayoutConstraint activateConstraints:@[
+    [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
+    [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
+    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
+    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
+  ]];
 }

+- (void)presentReactNative
+{
+  if (reactViewController == NULL) {
+    reactViewController = [ReactViewController new];
+  }
+  [self presentViewController:reactViewController animated:YES];
+}

@end

ViewController.swift
import UIKit

class ViewController: UIViewController {

+  var reactViewController: ReactViewController?

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    self.view.backgroundColor = .systemBackground

+    let button = UIButton()
+    button.setTitle("Open React Native", for: .normal)
+    button.setTitleColor(.systemBlue, for: .normal)
+    button.setTitleColor(.blue, for: .highlighted)
+    button.addAction(UIAction { [weak self] _ in
+      guard let self else { return }
+      if reactViewController == nil {
+       reactViewController = ReactViewController()
+      }
+      present(reactViewController!, animated: true)
+    }, for: .touchUpInside)
+    self.view.addSubview(button)
+
+    button.translatesAutoresizingMaskIntoConstraints = false
+    NSLayoutConstraint.activate([
+      button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
+      button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
+      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
+      button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
+    ])
  }
}

确保禁用沙盒脚本。要实现这一点，在 Xcode 中，单击您的应用程序，然后单击 Build Settings。搜索 script，并将 User Script Sandboxing 设置为 NO。此步骤对于正确切换我们在 React Native 中提供的Hermes 引擎的 Debug 和 Release 版本是必需的。

Disable Sandboxing

最后，请确保将 UIViewControllerBasedStatusBarAppearance 键及其值 NO 添加到您的 Info.plist 文件中。

Disable UIViewControllerBasedStatusBarAppearance

6. 测试您的集成

首先，您需要创建一个 metro.config.js 文件在项目根目录中，如下所示

js
const {getDefaultConfig} = require('@react-native/metro-config');
module.exports = getDefaultConfig(__dirname);

您可以查看社区模板中的metro.config.js 文件作为参考。

然后，您需要在项目根目录中创建一个 .watchmanconfig 文件。该文件必须包含一个空的 JSON 对象

sh
echo {} > .watchmanconfig

配置完成后，您就可以运行 bundler 了。在项目根目录中运行以下命令

npm
Yarn

shell
npm start

shell
yarn start

现在像往常一样构建和运行您的 iOS 应用。

一旦您在应用程序中进入由 React 驱动的 Activity，它应该会从开发服务器加载 JavaScript 代码并显示

在 Xcode 中创建发布构建

您也可以使用 Xcode 来创建您的发布构建！唯一的额外步骤是添加一个在应用程序构建时执行的脚本，用于将 JS 和图像打包到 iOS 应用程序中。

在 Xcode 中，选择您的应用程序
单击 Build Phases
单击左上角的 + 并选择 New Run Script Phase
单击 Run Script 行并将其重命名为 Bundle React Native code and images
将以下脚本粘贴到文本框中

构建 React Native 代码和图像
set -e

WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"

/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"

将脚本拖放到名为 [CP] Embed Pods Frameworks 的脚本之前。

现在，如果您构建应用程序的 Release 版本，它将按预期工作。

7. 向 React Native 视图传递初始 props

在某些情况下，您可能希望将信息从 Native 应用传递到 JavaScript。例如，您可能希望将当前登录用户的用户 ID 以及用于从数据库检索信息的令牌传递给 React Native。

通过使用 RCTReactNativeFactory 类的 view(withModuleName:initialProperty) 重载的 initialProperties 参数可以实现这一点。以下步骤将向您展示如何操作。

更新 App.tsx 文件以读取初始属性。

打开 App.tsx 文件并添加以下代码

App.tsx
import {
  Colors,
  DebugInstructions,
  Header,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

-function App(): React.JSX.Element {
+function App(props): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
-       <View
-         style={{
-           backgroundColor: isDarkMode
-             ? Colors.black
-             : Colors.white,
-           padding: 24,
-         }}>
-         <Text style={styles.title}>Step One</Text>
-         <Text>
-           Edit <Text style={styles.bold}>App.tsx</Text> to
-           change this screen and see your edits.
-         </Text>
-         <Text style={styles.title}>See your changes</Text>
-         <ReloadInstructions />
-         <Text style={styles.title}>Debug</Text>
-         <DebugInstructions />
+         <Text style={styles.title}>UserID: {props.userID}</Text>
+         <Text style={styles.title}>Token: {props.token}</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: '600',
+   marginLeft: 20,
  },
  bold: {
    fontWeight: '700',
  },
});

export default App;

这些更改将告诉 React Native 您的 App 组件现在接受某些属性。RCTreactNativeFactory 将在组件渲染时负责将其传递给组件。

更新 Native 代码以将初始属性传递给 JavaScript。

ObjectiveC
Swift

修改 ReactViewController.mm 以将初始属性传递给 JavaScript。

ReactViewController.mm
 - (void)viewDidLoad {
   [super viewDidLoad];
   // Do any additional setup after loading the view.

   _factoryDelegate = [ReactNativeFactoryDelegate new];
   _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
   _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
-  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
+  self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
+    @"userID": @"12345678",
+    @"token": @"secretToken"
+  }];
}

修改 ReactViewController.swift 以将初始属性传递给 React Native 视图。

ReactViewController.swift
  override func viewDidLoad() {
    super.viewDidLoad()
    reactNativeFactoryDelegate = ReactNativeDelegate()
    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
-   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
+   view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
+     "userID": "12345678",
+     "token": "secretToken"
+])

  }
}

再次运行您的应用程序。在呈现 ReactViewController 后，您应该会看到以下屏幕

接下来呢？

此时，您可以像往常一样继续开发您的应用程序。请参阅我们的调试和部署文档，以了解有关使用 React Native 的更多信息。

核心概念​

使用社区模板​

先决条件​

1. 设置目录结构​

2. 安装 NPM 依赖项​

3. 将 React Native 添加到您的应用​

配置 Gradle​

配置您的 Manifest​

4. 编写 TypeScript 代码​

创建 index.js 文件​

创建 App.tsx 文件​

5. 与您的 Android 代码集成​

更新您的 Application 类​

创建 ReactActivity​

6. 测试您的集成​

在 Android Studio 中创建发布构建​

接下来呢？​

核心概念​

使用社区模板​

先决条件​

1. 设置目录结构​

2. 安装 NPM 依赖项​

3. 安装开发工具​

Xcode 命令行工具​

CocoaPods​

4. 将 React Native 添加到您的应用​

配置 CocoaPods​

5. 编写 TypeScript 代码​

创建 index.js 文件​

创建 App.tsx 文件​

5. 与您的 iOS 代码集成​

要求​

创建 ReactViewController​

在 rootViewController 中呈现 React Native 视图​

6. 测试您的集成​

在 Xcode 中创建发布构建​

7. 向 React Native 视图传递初始 props​

更新 App.tsx 文件以读取初始属性。​

更新 Native 代码以将初始属性传递给 JavaScript。​

接下来呢？​

核心概念

使用社区模板

先决条件

1. 设置目录结构

2. 安装 NPM 依赖项

3. 将 React Native 添加到您的应用

配置 Gradle

配置您的 Manifest

4. 编写 TypeScript 代码

创建 `index.js` 文件

创建 `App.tsx` 文件

5. 与您的 Android 代码集成

更新您的 Application 类

创建 `ReactActivity`

6. 测试您的集成

在 Android Studio 中创建发布构建

接下来呢？

核心概念

使用社区模板

先决条件

1. 设置目录结构

2. 安装 NPM 依赖项

3. 安装开发工具

Xcode 命令行工具

CocoaPods

4. 将 React Native 添加到您的应用

配置 CocoaPods

5. 编写 TypeScript 代码

创建 `index.js` 文件

创建 `App.tsx` 文件

5. 与您的 iOS 代码集成

要求

创建 ReactViewController

在 rootViewController 中呈现 React Native 视图

6. 测试您的集成

在 Xcode 中创建发布构建

7. 向 React Native 视图传递初始 props

更新 App.tsx 文件以读取初始属性。

更新 Native 代码以将初始属性传递给 JavaScript。

接下来呢？