跳到主要内容

集成到现有应用

当你从头开始一个新的移动应用时,React Native 非常棒。然而,它也很适合向现有的原生应用添加单个视图或用户流程。只需几个步骤,你就可以添加新的基于 React Native 的功能、屏幕、视图等。

具体的步骤因你目标的平台而异。

关键概念

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

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

使用社区模板

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

先决条件

遵循关于 设置你的开发环境 和使用 不使用框架的 React Native 的指南,为构建 Android 的 React Native 应用配置你的开发环境。本指南还假设你熟悉 Android 开发的基础知识,例如创建 Activity 和编辑 AndroidManifest.xml 文件。

1. 设置目录结构

为了确保流畅的体验,为你的集成 React Native 项目创建一个新文件夹,然后将你现有的 Android 项目移动/android 子文件夹。

2. 安装 NPM 依赖

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

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

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

接下来,通过运行以下命令安装 NPM 包

shell
npm install

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

node_modules/ 添加到你的 .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 并包含这一行(如 社区模板 建议的那样)

diff
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 文件夹内 - 你可以使用 社区模板文件作为参考

diff
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 文件并添加以下行(这里是 社区模板文件作为参考

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

配置你的 manifest

首先,确保你的 AndroidManifest.xml 中有 Internet 权限

diff
<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 中启用 明文流量

diff
<?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 文件,可作为参考:maindebug

这是必需的,因为你的应用将与你的本地 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 应如下所示(这里是 社区模板文件作为参考

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,如下所示

diff
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();
+ }
}
}

像往常一样,这里是 MainApplication.kt 社区模板文件作为参考

创建一个 ReactActivity

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

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());
}
}

像往常一样,这里是 MainActivity.kt 社区模板文件作为参考

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

diff
<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。在你的项目的根目录中运行以下命令

shell
npm 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 的信息。