react native 插件化

研發背景

安卓內建react-native加載多個插件bundle包，由于公司項目業務需求，将項目進行架構分為主app和業務插件。而與網上的搜到的情況不同，app的所有代碼都是rn開發，要求插件包能夠在app不更新上架的情況下，能夠正常的加載不同的插件業務包。這樣一來，網上的拆分包打包加載無法實作項目效果。最後選擇使用在原生通過加載不同的bundle資源包，在rn中調用原生方法跳轉頁面然後加載不同bundle資源包和ReactNativeHost來進行插件化開發。

開發過程

1、打包

通過指令行分别将主app代碼和插件業務代碼進行打包。相當于打兩個不同的app資源包

主app代碼進行打包與正常rn項目安卓打包方式一緻即可，因項目為rn項目，是以主app的業務代碼不需要單獨進行打包處理，指令行如下：

./gradlew assembleRelease

插件業務代碼進行打包，打包指令如下：

node ./node_modules/react-native/local-cli/cli.js bundle --entry-file ./入口檔案 --platform android --dev false --bundle-output ./bundles/業務代碼.bundle --assets-dest ./bundles

其中--entry-file參數後輸入的是業務包的注冊入口檔案，與主app中的index.js檔案相同，為注冊業務代碼入口；--bundle-output參數後輸入的是打包後輸出的bundle包位置； --assets-dest參數後輸入的是代碼中相應的圖檔等資源的輸出目錄。

注意：插件業務代碼打包生成的bundle包和資源目錄要放在同級目錄下使用。

2、插件包的加載

安卓原生加載rn的bundle包有兩種方式。在CatalystInstanceImpl類中的loadScriptFromAssets方法和loadScriptFromFile方法

安卓加載rn資源的兩種方法

一種是直接加載asset中資源檔案，一般asset中的資源檔案會在項目打包過程中與apk一起釋出。

一種是加載file中的檔案，在本項目中，插件的業務包使用加載file的方式。

3、安卓原生代碼實作

先建立一個application類，然後實作主app的ReactNativeHost，再建立一個接口，用來提供加載插件的ReactNativeHost方法供外部其他頁面調用，具體實作代碼如下：

MyReactApplication接口給外部提供一個擷取ReactNativeHost方法

import com.facebook.react.ReactNativeHost;
 public interface MyReactApplication {
         ReactNativeHost getReactNativeMyHost();
 }
            

複制

application實作類

自定義application類-1