前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react native 插件化

react native 插件化

原创
作者头像
conanma
发布2022-03-09 18:55:56
1.1K0
发布2022-03-09 18:55:56
举报
文章被收录于专栏:正则正则
研发背景

安卓集成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方法

代码语言:javascript
复制
 import com.facebook.react.ReactNativeHost;
 public interface MyReactApplication {
         ReactNativeHost getReactNativeMyHost();
 }
 

application实现类

自定义application类-1

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 研发背景
  • 开发过程
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档