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页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。