跳到主要内容

与现有应用程序集成

从头开始开发新的移动应用时,React Native 非常出色。但是,它也非常适合为现有的原生应用程序添加单个视图或用户流。只需几个步骤,您就可以添加新的基于 React Native 的功能、屏幕、视图等。

具体步骤因您所针对的平台而异。

核心概念

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

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

使用社区模板

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

先决条件

请遵循有关设置您的开发环境不使用框架的 React Native 的指南,以配置您的开发环境以构建适用于 Android 的 React Native 应用程序。本指南还假设您熟悉 Android 开发的基础知识,例如创建活动和编辑 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 并包含此行(如社区模板中建议的)

差异
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

配置您的清单

首先,确保您的 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 文件,可作为参考:maindebug

这是必需的,因为您的应用程序将通过 HTTP 与您的本地打包器 Metro 进行通信。

请确保仅将其添加到您的调试清单中。

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

差异
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 代码。此活动将负责启动 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 社区模板文件作为参考

每当您创建一个新活动时,都需要将其添加到 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>

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

6. 测试您的集成

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

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

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

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

配置好后,即可运行打包器。在项目根目录中运行以下命令

shell
npm start

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

一旦您在应用程序中到达由 React 提供支持的活动,它应该会从开发服务器加载 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 的更多信息。