已有Android原生项目集成已有React Native项目

已有Android原生项目集成已有React Native项目

• 现状

  目前有两个项目，一个为Android原生开发，另一个为React Native开发，功能不同，但是使用人群相同，故考虑将两个项目合为一个。

• 实现过程

  1. 确定集成方式

     一种是原生项目提供一个入口，通过该入口进入React Native（后简述为RN）页面，完整的使用RN的功能。

     一种是原生项目只接入RN部分页面，如商品详情页，投诉建议页面等。

     由于已有项目架构上不能支持第二种，于是本节采用第一种来集成，第二种将在第二节中讲述。

  2. 梳理原生和RN现有工程依赖

     这一步主要是梳理清楚原生和RN工程用到了哪些依赖，要一个不剩的合并在一起，合并后我们工程为图中样子。

     ss_1_

     红色框内为原生项目，蓝色框为RN项目的依赖。

  3. 原生项目添加RN支持

     参考官方文档

     可能遇到的坑

     • java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so

       参考

     • 没有正确引入本地RN库

       可以参考我的

       allprojects {
           repositories {
               google()
               jcenter()
               mavenCentral()
               maven { url "https://jitpack.io" }
               // All of React Native (JS, Android binaries) is installed from npm
               maven{
                   url "$rootDir/../node_modules/react-native/android"
               }
               maven {
                   url 'https://maven.google.com/'
                   name 'Google'
               }
           }
       }
       

     • RN不支持armeabi的CPU架构，而导航SDK又只有armeabi

       可以参考这篇文章链接中的6，7解决

     • Debug正常，Release中RN界面直接闪退

       检查是否有正确的打包JS Bundle到assets中，这个官网文档有写

       ss_2

       可以参考我的

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

       这里我的入口文件为app.js注意替换为你的

       后面的两个路径，一个是项目入口module的assets文件夹，没有的话记得自己创建一下，另一个是res的路径，RN打包会将图片Copy到drawable中。

  4. 测试启动

     步骤1中配置了RN页面的容器Activity，类似下图

     ss_3

     这里startReactApplication第三个参数为参数，RN页面可以通过props获取。