Reactnative嵌套Android再嵌套ReactNative项目总结

Reactnative嵌套Android再嵌套ReactNative项目总结

转载请注明出处，阳仔在此谢谢啦！如有不妥多指教！
**
示例图：RN开发的理财app–>点击‘我要借款’—>跳转到RN开发的借款app—>点击返回按钮返回到理财app

需求：

**

• 1.基于Reactnative开发一个Android项目；

• 2.基于Android项目，app中部分功能使用Reactnative开发；

• 3.Reactnative项目嵌套之前已经开发完成的Android项目；

• 4.Reactnative项目嵌套之前已经开发完成的Reactnative项目。
  **

  其实这几种需求都是大同小异，只是对Reactnative结合Android原生开发有一定的了解之后的一种混搭运用。所以我只介绍最后一种最复杂的RN嵌套RN开发。本文只是自己在开发完后的总结，做笔记用，希望能对需要的人有所帮助。本人采用RN 0.44版本

一、项目结构分析（只介绍需要用到的东西，有不准确的地方希望可以理解。）

这张图是我的Reactnative项目的结构图，其中有些文可能你们自己自动创建的项目不包括，可以不用理会，只需要我划红线的文件有即可。
1.android:每个RN（Reactnative）项目的生成都会自动创建一个Android项目和iOS项目，这个文件夹下就是一个相当于Android Studio创建的Android项目。

2.app:这个文件夹是所有RN代码写出来的此项目的代码文件。

3.node_modules：RN开发所有依赖的源码所在。

4.index.android.js:入口文件，用于指向路由文件，启动此项目首先会运行这里面的代码。相当于生活中进屋子的门，想进去必须走这个门。

5.package.json:RN项目的配置文件，里面记录了，此RN项目的版本号，所依赖的第三方包等信息。

有开发经验的人应该已经理解了这些结构的含义了，不做过多解释。

此图是android文件夹下的Android结构，这个结构是已经是嵌套了RN项目后的结构。
1.assets:每个Android项目下都会有个assets目录，没有的自己在相应位置创建一下。里面放的四个文件index.android.bundle对应主项目的你开发完的代码文件，index.andorid2.bundle对应子RN项目的代码文件，打包的时候，apk会把这几个存有RN代码的文件一起打包。

2.AndroidManifest：android的配置清单文件，里面配置了Android的页面和第三方key等信息

3.build.gradle：android studio自动生成的文件，
android/app下的配置文件。app结合RN开发的时候里面需要配置一些信息

4.node_modules:同上

5.wallet:子RN项目的开发好的代码，同主项目的app文件夹。这个名字自己随便取名。我是直接把app文件夹改个名拷过来的

6.build.gradle：andorid项目下的配置文件

7.gradle.properties：也是配置文件，不细说了

8.index.android2.js：子RN项目的入口文件，作用同上

9.package.json:同上，这里是子RN项目的配置文件

10.settings.gradle：Android项目配置文件。

11.update.jaon：热更新文件。

12.local.properties:android配置文件，忘了划红线了。

二、原理

其实原理很简单，实现RN项目嵌套RN项目就是一个多层级调用问题

拆分成：
**

• 1.Reactnative-Android项目
• 2.Android-Reactnative项目（Android项目部分功能用RN开发）
• 3.RN-android-RN:把前两步关联起来
  **

三、开始嵌套步骤

• 1.备份，把你所有要开始操作的源码项目等做备份，以免嵌套出错无法还原项目，丢失源码。
• 2.设计目录结构，设计一个好的目录结构，便于以后更新维护，迭代版本，避免二次开发等。
• **3.排查避免两个RN项目中图片、布局文件等资源的名字
• **4.把主RN项目中的android项目改成符合RN项目的结构，此流程可参考官方教程https://reactnative.cn/docs/0.44/integration-with-existing-apps.html#content

我自己是把子项目中的文件自己拷贝到Android项目中的，主要是package.json、update.json、node_modules、入口文件index.android2.js、子项目RN编写的代码。

开始：
（1）更改android/app/build.gradle：

app下的build.gradle下有个依赖node_modules的路径，改成android目录下的node_modules路径，这个时候相当于主RN项目的源码依赖也是这个node_modules了，如果忘了改这个路径会出现重复引用的报错。
Android SDK必须是6.0级别的
dependencies下要把你两个RN项目依赖的第三方包也要都一起添加。
（2）更改Android项目的build.gradle.下面是我的android/build.gradle中的代码：

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

（3）更改考入到android下的入口文件

更改名字和路径到对应正确的路径和名字。
（4）子RN项目嵌入Android

新建一个Activity继承和实现图中类。
在onCreate()方法中添加必要的和自己子RN项目依赖的第三方包，这里的过程可以参考刚才上面给出的官网或者其他帖子（可以参考这个http://blog.youkuaiyun.com/win816723459/article/details/54317038）
（5）实现主RN项目调用嵌入到Android项目中的子RN项目
参考官网地址https://reactnative.cn/docs/0.44/native-modules-android.html#content实际就是官网教程里这个模块：

结合使用一下就可以了。
（6）生成index.android2.bundle到assets.
运行命令（里面部分文件名和路径自己根据自己实际情况去修改）：

react-native bundle --platform android --dev false --entry-file index.android2.js  --bundle-output app/src/main/assets/index.android2.bundle  --assets-dest app/src/main/res/

最后会生成这样，分别是主RN和子RN项目的代码文件

最后编译没问题后打包测试，不打包是不能测试的。
###四、总结

其实就是对RN项目结构的一种灵活运用，我写的可能逻辑性不是很强，只是我的一种实现思路，具体可能会遇到很多问题，我当时自己花了很长时间去摸索出来。自己可以按照这个思路去试验一下。有问题可以联系我，咱们互相交流：QQ:3217609929 邮箱：lvyangdown@foxmail.com