android原生接入rn,Android原生项目集成RN页面

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...}，具体的传递方式参考三方包的使用说明

总结

以上是生活随笔为你收集整理的android原生接入rn,Android原生项目集成RN页面的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。