Android原生接入ReactNative
许久不接触RN，重新捡起重复踩坑，折腾三天就此记录
优化后接入步骤
新建文件夹，将原AndroidStudio项目拷贝至此目录
同目录下新建package.json文件，编辑基本项目信息
{
"name": "工程名",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"@unimodules/core": "^0.2.0",
"react": "16.6.3",
...
所需依赖
},
"devDependencies": {
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.52.0",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
@unimodules/core 本次开发中因使用了此三方包导致我Android工程提供RN的依赖一直出问题，最后只得将三方文件目录与配置文件放至工程同目录下
安装下载所需RN文件 package.json文件所在目录打开命令行输入 npm i
文件夹.png
Android build.gradle文件配置
project build.gradle配置
allprojects {
repositories {
···
maven{
//AllofReactNative(JS,Androidbinaries)isinstalledfromnpm
url"$rootDir/../node_modules/react-native/android"
// ../ 表示上一层目录，跟下载RN三方组件存放位置而定，最好按我上图所放，避免后面我踩的坑
}
}
}
app build.gradle配置添加依赖implementation 'com.facebook.react:react-native:+'
sync now 之后有问题可评论私信我
配置Application与显示RN页面的容器Activity
Application 实现 ReactApplication
ReactApplication实现.png
Activity继承ReactActivity
ReactActivity.png
配置打包好的bundle
将RN开发人员写好的bundle文件配置到assets文件中进行测试，一般来说，我们是通过下载来获取bundle文件的，这里可以指定下载的bundle文件地址，在Application中的return super.getJSBundleFile(); 中设置修改地址
RN中用到的三方包依赖问题
直接引入
include ':三方包名'
project(':三方包名').projectDir = new File(rootProject.projectDir, '../node_modules/三方包名/android')
间接引入
本次项目里采用了@unimodules/core这个三方去引入其他依赖的三方，调试过程中拉取到的其他三方包全为空文件夹，最后更改文件夹形式规避掉该问题，如有读者大大知道烦请指点
apply from: "../node_modules/@unimodules/core/settings.gradle"
useUnimodules.apply()
三方包的传入
对app添加对所引入的三方包的依赖后，在Application中对这些三方包进行传递给RN页面使用
protected List getPackages() { return...}，具体的传递方式参考三方包的使用说明
