跳到主要内容

与现有应用集成

当您从头开始创建一个新的移动应用时,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 并查看您的应用运行情况来测试您的集成。

使用 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 依赖项

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

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

这将从 Community template 文件复制 package.json 到您的项目。

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

shell
npm install

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

node_modules/ 添加到您的 .gitignore 文件(此处为 Community 默认文件)。

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

配置 Gradle

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

首先,让我们编辑您的 settings.gradle 文件,添加以下几行(如 Community template 中建议的那样)

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 并包含此行(如 Community template 中建议的那样)

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 Plugin (RNGP) 在您的项目中可用。最后,在您的应用程序的 build.gradle 文件中添加以下几行(这是一个不同的 build.gradle 文件,通常在您的 app 文件夹中 - 您可以使用 Community template 文件作为参考

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 文件并添加以下行(此处为 Community template 文件作为参考

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>

与往常一样,这是来自 Community template 的 AndroidManifest.xml 文件,可作为参考使用:maindebug

这是必需的,因为您的应用程序将通过 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 文件作为参考

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;

此处为 Community template 文件作为参考

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 Community template 文件作为参考

创建一个 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 Community template 文件作为参考

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

您可以从 Community template 文件中查看 metro.config.js 文件 作为参考。

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

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