公司项目重构，需要使用到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页面
网友评论