与现有应用集成
当您从头开始创建一个新的移动应用时,React Native 非常棒。然而,它也适用于向现有原生应用添加单个视图或用户流程。只需几个步骤,您就可以添加新的基于 React Native 的功能、屏幕、视图等。
具体步骤因您要定位的平台而异。
- Android(Java & Kotlin)
- iOS(Objective-C 和 Swift)
关键概念
将 React Native 组件集成到您的 Android 应用中的关键在于
- 设置正确的目录结构。
- 安装必要的 NPM 依赖项。
- 将 React Native 添加到您的 Gradle 配置中。
- 为您的第一个 React Native 屏幕编写 TypeScript 代码。
- 使用 ReactActivity 将 React Native 与您的 Android 代码集成。
- 通过运行 bundler 并查看您的应用运行情况来测试您的集成。
使用 Community Template
在您遵循本指南时,我们建议您使用 React Native Community Template 作为参考。该模板包含一个最小的 Android 应用,将帮助您理解如何将 React Native 集成到现有的 Android 应用中。
先决条件
按照关于设置您的开发环境和使用不使用框架的 React Native的指南,配置您的开发环境以构建用于 Android 的 React Native 应用。本指南还假设您熟悉 Android 开发的基础知识,例如创建 Activity 和编辑 AndroidManifest.xml
文件。
1. 设置目录结构
为确保流畅的体验,请为您的集成 React Native 项目创建一个新文件夹,然后将您现有的 Android 项目移动到 /android
子文件夹。
2. 安装 NPM 依赖项
转到根目录并运行以下命令
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json
这将从 Community template 文件复制 package.json
到您的项目。
接下来,通过运行以下命令安装 NPM 包
- npm
- Yarn
npm install
yarn install
安装过程创建了一个新的 node_modules
文件夹。此文件夹存储构建项目所需的所有 JavaScript 依赖项。
将 node_modules/
添加到您的 .gitignore
文件(此处为 Community 默认文件)。
3. 将 React Native 添加到您的应用
配置 Gradle
React Native 使用 React Native Gradle Plugin 来配置您的依赖项和项目设置。
首先,让我们编辑您的 settings.gradle
文件,添加以下几行(如 Community template 中建议的那样)
// 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
并包含此行(如 Community template 中建议的那样)
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 Plugin (RNGP) 在您的项目中可用。最后,在您的应用程序的 build.gradle
文件中添加以下几行(这是一个不同的 build.gradle
文件,通常在您的 app
文件夹中 - 您可以使用 Community template 文件作为参考)
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
文件并添加以下行(此处为 Community template 文件作为参考)
+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>
然后,您需要在您的 debug 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>
与往常一样,这是来自 Community template 的 AndroidManifest.xml 文件,可作为参考使用:main 和 debug
这是必需的,因为您的应用程序将通过 HTTP 与您的本地 bundler [Metro][https://metrobundler.dev/] 通信。通过 HTTP。
确保您仅将其添加到您的 debug manifest。
4. 编写 TypeScript 代码
现在我们将实际修改原生 Android 应用程序以集成 React Native。
我们将编写的第一段代码是用于新屏幕的实际 React Native 代码,该屏幕将集成到我们的应用程序中。
创建一个 index.js
文件
首先,在您的 React Native 项目的根目录中创建一个空的 index.js
文件。
index.js
是 React Native 应用程序的起点,并且始终是必需的。它可以是一个小文件,import
其他属于您的 React Native 组件或应用程序的文件,或者它可以包含所需的所有代码。
我们的 index.js 应如下所示(此处为 Community template 文件作为参考)
import {AppRegistry} from 'react-native';
import App from './App';
AppRegistry.registerComponent('HelloWorld', () => App);
创建一个 App.tsx
文件
让我们创建一个 App.tsx
文件。这是一个 TypeScript 文件,可以具有 JSX 表达式。它包含我们将集成到 Android 应用程序中的根 React Native 组件(链接)
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 Community template 文件作为参考
创建一个 ReactActivity
最后,我们需要创建一个新的 Activity
,它将扩展 ReactActivity
并托管 React Native 代码。此 activity 将负责启动 React Native 运行时并渲染 React 组件。
- Java
- Kotlin
// 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());
}
}
// 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 Community template 文件作为参考
每当您创建一个新的 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
文件,如下所示
const {getDefaultConfig} = require('@react-native/metro-config');
module.exports = getDefaultConfig(__dirname);
您可以从 Community template 文件中查看 metro.config.js 文件 作为参考。
一旦您有了配置文件,您就可以运行 bundler。在您的项目根目录中运行以下命令
- npm
- Yarn
npm start
yarn start
现在像往常一样构建并运行您的 Android 应用。
一旦您在应用中到达 React 驱动的 Activity,它应该从开发服务器加载 JavaScript 代码并显示

在 Android Studio 中创建发布版本
您也可以使用 Android Studio 创建您的发布版本!这与创建您以前的现有原生 Android 应用的发布版本一样快。
React Native Gradle Plugin 将负责将 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 并查看您的应用运行情况来测试您的集成。
使用 Community Template
在您遵循本指南时,我们建议您使用 React Native Community Template 作为参考。该模板包含一个最小的 iOS 应用,将帮助您理解如何将 React Native 集成到现有的 iOS 应用中。
先决条件
按照关于设置您的开发环境和使用不使用框架的 React Native的指南,配置您的开发环境以构建用于 iOS 的 React Native 应用。本指南还假设您熟悉 iOS 开发的基础知识,例如创建 UIViewController
和编辑 Podfile
文件。
1. 设置目录结构
为确保流畅的体验,请为您的集成 React Native 项目创建一个新文件夹,然后将您现有的 iOS 项目移动到 /ios
子文件夹。
2. 安装 NPM 依赖项
转到根目录并运行以下命令
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/package.json
这将从 Community template 文件复制 package.json
到您的项目。
接下来,通过运行以下命令安装 NPM 包
- npm
- Yarn
npm install
yarn install
安装过程创建了一个新的 node_modules
文件夹。此文件夹存储构建项目所需的所有 JavaScript 依赖项。
将 node_modules/
添加到您的 .gitignore
文件(此处为 Community 默认文件)。
3. 安装开发工具
Xcode 命令行工具
安装命令行工具。在 Xcode 菜单中选择Settings...(或 Preferences...)。转到 Locations 面板,并通过在 Command Line Tools 下拉列表中选择最新版本来安装工具。
CocoaPods
CocoaPods 是 iOS 和 macOS 开发的包管理工具。我们使用它将实际的 React Native 框架代码本地添加到您当前的项目中。
我们建议使用 Homebrew 安装 CocoaPods
brew install cocoapods
4. 将 React Native 添加到您的应用
配置 CocoaPods
要配置 CocoaPods,我们需要两个文件
- 一个 Gemfile,用于定义我们需要哪些 Ruby 依赖项。
- 一个 Podfile,用于定义如何正确安装我们的依赖项。
对于 Gemfile,转到您的项目根目录并运行此命令
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-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 gem 才能使其正常工作。
类似地,对于 Podfile,转到您项目的 ios
文件夹并运行
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/ios/Podfile
请使用 Community Template 作为 Gemfile 和 Podfile 的参考点。
请记住更改 此行。
现在,我们需要运行几个额外的命令来安装 Ruby gem 和 Pod。导航到 ios
文件夹并运行以下命令
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
是 React Native 应用程序的起点,并且始终是必需的。它可以是一个小文件,import
其他属于您的 React Native 组件或应用程序的文件,或者它可以包含所需的所有代码。
我们的 index.js
应如下所示(此处为 Community template 文件作为参考)
import {AppRegistry} from 'react-native';
import App from './App';
AppRegistry.registerComponent('HelloWorld', () => App);
创建一个 App.tsx
文件
让我们创建一个 App.tsx
文件。这是一个 TypeScript 文件,可以具有 JSX 表达式。它包含我们将集成到 iOS 应用程序中的根 React Native 组件(链接)
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 应用的任何特定部分解耦。
可以使用名为 RCTReactNativeFactory
的类初始化 React Native,该类负责为您处理 React Native 生命周期。
一旦类被初始化,您可以启动一个提供 UIWindow
对象的 React Native 视图,或者您可以要求工厂生成一个 UIView
,您可以将其加载到任何 UIViewController
中。
在以下示例中,我们将创建一个 ViewController,它可以加载 React Native 视图作为其 view
。
创建 ReactViewController
从模板创建一个新文件 (⌘+N) 并选择 Cocoa Touch Class 模板。
确保选择 UIViewController
作为“Subclass of”字段。
- ObjectiveC
- Swift
现在打开 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
文件并应用以下更改
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
#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
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),
+ ])
}
}
确保禁用 Sandbox 脚本。要实现这一点,请在 Xcode 中,单击您的应用,然后单击构建设置。筛选脚本并将 User Script Sandboxing
设置为 NO
。此步骤是正确切换我们随 React Native 提供的 Hermes 引擎 的 Debug 和 Release 版本所必需的。
最后,确保将 UIViewControllerBasedStatusBarAppearance
键添加到您的 Info.plist
文件中,值为 NO
。
6. 测试您的集成
您已完成将 React Native 与您的应用程序集成的所有基本步骤。现在我们将启动 Metro bundler,以将您的 TypeScript 应用程序代码构建到 bundle 中。Metro 的 HTTP 服务器从您的开发环境中的 localhost
向模拟器或设备共享 bundle。这允许 热重载。
首先,您需要在您的项目根目录中创建一个 metro.config.js
文件,如下所示
const {getDefaultConfig} = require('@react-native/metro-config');
module.exports = getDefaultConfig(__dirname);
您可以从 Community template 文件中查看 metro.config.js 文件 作为参考。
然后,您需要在您的项目根目录中创建一个 .watchmanconfig
文件。该文件必须包含一个空的 json 对象
echo {} > .watchmanconfig
一旦您有了配置文件,您就可以运行 bundler。在您的项目根目录中运行以下命令
- npm
- Yarn
npm start
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
- 将以下脚本粘贴到文本框中
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. 将初始 props 传递给 React Native 视图
在某些情况下,您可能希望将来自 Native 应用的一些信息传递给 JavaScript。例如,您可能希望将当前登录用户的用户 ID 与可用于从数据库检索信息的令牌一起传递给 React Native。
这可以通过使用 RCTReactNativeFactory
类的 view(withModuleName:initialProperty)
重载的 initialProperties
参数来实现。以下步骤向您展示如何执行此操作。
更新 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
将负责将它们传递给组件。
更新原生代码以将初始属性传递给 JavaScript。
- ObjectiveC
- Swift
修改 ReactViewController.mm
以将初始属性传递给 JavaScript。
- (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 视图。
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 的更多信息。