Android原生项目集成RN页面

Android原生接入ReactNative

许久不接触RN，重新捡起重复踩坑，折腾三天就此记录

优化后接入步骤

1. 新建文件夹，将原AndroidStudio项目拷贝至此目录
2. 同目录下新建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的依赖一直出问题，最后只得将三方文件目录与配置文件放至工程同目录下

3. 安装下载所需RN文件 package.json文件所在目录打开命令行输入 npm i
   
4. 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 之后有问题可评论私信我

5. 配置Application与显示RN页面的容器Activity

• Application 实现 ReactApplication
• Activity继承ReactActivity

6. 配置打包好的bundle
   将RN开发人员写好的bundle文件配置到assets文件中进行测试，一般来说，我们是通过下载来获取bundle文件的，这里可以指定下载的bundle文件地址，在Application中的return super.getJSBundleFile(); 中设置修改地址
7. RN中用到的三方包依赖问题

• 直接引入

include ':三方包名'
project(':三方包名').projectDir = new File(rootProject.projectDir, '../node_modules/三方包名/android')

• 间接引入
  本次项目里采用了@unimodules/core这个三方去引入其他依赖的三方，调试过程中拉取到的其他三方包全为空文件夹，最后更改文件夹形式规避掉该问题，如有读者大大知道烦请指点

apply from: "../node_modules/@unimodules/core/settings.gradle" 
useUnimodules.apply()

8. 三方包的传入
   对app添加对所引入的三方包的依赖后，在Application中对这些三方包进行传递给RN页面使用
   protected List getPackages() { return...}，具体的传递方式参考三方包的使用说明