跳到主要内容

与现有应用程序集成

从零开始开发新的移动应用时,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 开发的基础知识,例如创建 Activity 和编辑AndroidManifest.xml文件。

1. 设置目录结构

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

2. 安装 NPM 依赖项

进入根目录并运行以下命令

shell
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.82-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类以正确初始化 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社区模板文件作为参考

每当您创建一个新的 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>

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

6. 测试您的集成

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

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

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

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

一旦您有了配置文件,就可以运行打包器。在项目根目录中运行以下命令

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