ReactNative 集成到Android项目

525 阅读1分钟

一. 配置环境--Windows

1. 配置项目目录结构

创建一个空目录用于存放 React Native 项目,然后在其中创建一个/android子目录,把你现有的 Android 项目拷贝到/android子目录中。

2. 安装 JavaScript 依赖包

在项目根目录下创建一个名为package.json的空文本文件,然后填入以下内容:

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start"
  }
}

安装 React 和 React Native 模块。进入到项目目录中(即包含有 package.json 文件的目录),运行下列命令

$ yarn add react-native

// 如果遇到警告
warning "react-native@0.52.2" has unmet peer dependency "react@18.2.0".
// 额外执行以下命令
yarn add react@18.2.0

二. 把 React Native 添加到你的应用中

1. 配置 Gradle

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

首先,让我们通过添加以下行来编辑您的settings.gradle文件:

includeBuild('../node_modules/@react-native/gradle-plugin')

然后你需要打开顶层的 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 Plugin 在您的项目中可用。 最后,在 app/build.gradle 文件中添加以下行(注意它的路径不同于上面,是app/build.gradle):

apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"

repositories {
    mavenCentral()
}

dependencies {
    // Other dependencies here
+   implementation "com.facebook.react:react-android"
+   implementation "com.facebook.react:hermes-android"
}

2. 启用原生模块的自动链接

要使用自动链接的功能,我们必须将其应用于几个地方。首先,将以下内容添加到settings.gradle:

apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

接下来,在app/build.gradle的最底部添加以下内容:

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

3. 配置权限

接着,在 AndroidManifest.xml 清单文件中声明网络权限:

<uses-permission android:name="android.permission.INTERNET" />

如果需要访问 DevSettingsActivity 界面(即开发者菜单),则还需要在 AndroidManifest.xml 中声明:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

三.

四.

五. 参考文章

RN 集成到Android