Android 模块module引入ReactNative相关环境配置

公司项目重构，需要使用到RN和Android的混合开发。综合讨论研究觉得在RN项目中嵌入已有的Android原生项目进行开发，这样原生开发人员只配置一次RN的相关依赖，以后根据bundle文件名加载RN相关页面即可。两端代码开发互补影响

1.新建普通ReactNative工程

新建一个普通的RN工程即可(环境自行百度配置)，打开webstorm->File->new->New Project 选择 React Native...按步骤执行即可。

2.放入Android原生工程

把Android原生项目放入到RN项目跟目录下与RN自带android工程同级。

image

选择直接放入原生工程而不是在RN的安卓工程开发主要考虑以下几点：

    (1) 安卓原生工程采用模块化开发，各个模块相互独立运行。把RN依赖配置到APP目录下，其他模块独立运行访问不到。

    (2)如果RN环境集成到相关模块里，RN项目使用android进行调试时报错

    (3)RN项目运行调试时，需要更改APP模块里的部分代码，两端各自调试都需要在APP模块里面改一些代码。

    (4)直接放入原生工程，两端开发调试互不影响，后期RN工程只需要打出bundle文件给原生调用即可。

3.在项目根目录下的build.gradle添加以下配置

复制RN 目录中 android项目跟目录的buidl.gradle中的相关配置到自己项目根目录的build.gradle

allprojects {
    repositories {
        ...
        maven {
            //RN的相关配置，此处注意路径的配置
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
    }
}

4.在原生项目的setting.gradle中加入配置

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

此配置主要是为了自动引入RN项目中的一些三方依赖

5.在原生项目中新建名为lib_rn的module

如果不需要模块化忽略此步，可以直接在项目app目录进行相关配置，或者直接使用RN生成的android项目

6.在lib_rn的build.gradle文件中配置相关参数

在android{}上方配置如下设置

project.ext.react = [
        enableHermes: false,  // clean and rebuild if changing
]


def enableSeparateBuildPerCPUArchitecture = false

def jscFlavor = 'org.webkit:android-jsc:+'


def enableHermes = project.ext.react.get("enableHermes", false);

在dependencies{}里配置如下

dependencies{
       ...
   implementation "com.facebook.react:react-native:+"  // RN相关依赖
 if (enableHermes) {
       def hermesPath = "../../node_modules/hermes-engine/android/";
       debugImplementation files(hermesPath + "hermes-debug.aar")
       releaseImplementation files(hermesPath + "hermes-release.aar")
   } else {
       implementation jscFlavor
   }
     }

注意： RN公共远程仓库只提供了0.20.1版本（最新版本为0.63.1），所以需要在原生项目根目录的build.gradle配置相关依赖(步骤三)

7.在最后配置相关参数

android{
        ...
      }
dependencies{
        ...
      }
task copyDownloadableDepsToLibs(type: Copy) {
  from configurations.compile
  into 'libs'
}
//此处和setting.gradle的配置来自动依赖一些RN的三方以来，比如image-picker
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

接下来整理一下如何在原生项目中加载ReactNative页面
如何在android原生项目中加载ReactNative页面

最后编辑于：2020.08.04 14:48:13