关于前端:ReactNative混合开发之热更新的实现

2次阅读

共计 2281 个字符，预计需要花费 6 分钟才能阅读完成。

作者：iplaycodex
仓库：github、codePen
博客：掘金、segmentfault、知乎、简书、博客园
公众号：FEZONE(大写)
分割我：iplaycodex@163.com
特地申明：原创不易，未经受权不得对此文章进行转载或剽窃，否则按侵权解决，如需转载或开明公众号白名单可分割我，尊重原创尊重知识产权从我做起

react-native能够独立写 APP, 然而在更多的公司中以 混合开发模式 居多. 也就是说局部模块应用 native 去开发, 局部模块应用 react-native 来进行开发. 这种开发模式带来的长处是不言而喻的,native+react-native能够在解决某些更新频繁, 突发性需要或者对 Ui 页面灵活性要求比拟高的中央. 例如 618, 双 11,双 12… 这种页面通常都有具备很大的灵活性. 如果这个时候咱们都用 native 来实现则灵活性欠佳. 而应用 native+react-native 的混合开发模式则能够完满的解决这个问题. 静默降级, 用户体验佳. 且 iOS 不必发版, 不必提交审即可更新, 大大的进步了产品的迭代速度, 为用户带来更好的体验

具体怎么做呢? 首先当然是咱们须要打包各平台对应的 bundle 包. 如何打包, 参见上一篇文章:react-native 优化之拆包. 上面的是曾经打包好的图示:

iOS
android

能够看到针对 ios 和android两个平台咱们都曾经打包进去的各自的 bundle 包和动态资源.

这里对文件做一下解释阐明:

base.bundle这个是我的项目中的根底包, 也是下面所说的 react-native 优化之拆包 中的根底包. 此包中蕴含 react 的一些根底依赖, 例如:react,react-native,react-navigation,redux等底层根底依赖
bus.bundle则是业务包. 它是动静的, 会降级的比拟频繁. 个别根底包会长久化在 APP 的沙盒中, 基本上处于静止状态, 不做更新, 除非有大的版本更新, 才做根底包更新.
assets这个是 iOS 平台依赖的图片动态资源. 内含在 react-native 中应用的 @2x 图和 @3x 图
drawable-xhdpi和 drawable-xxhdpi 这个是安卓平台依赖的图片资源

在理论利用中咱们个别会将 bus.bundle 和assets或者 drawable-xhdpi(drawable-xxhdpi) 打包成为一个 ZIP, 一来这样体积更小, 在 APP 上下载也更快, 二来这样能够把 bundle 和动态资源 打包到一起, 更新的时候间接下载这个 ZIP, 解压缩即可

这样其实就实现了 react-native 在iOS和 android 中的热更新. 然而现实是美妙的, 事实是残暴的. 这里把我踩到的坑分享一下

iOS 接入很失常没有问题, 没有任何故障. 依照下面所述间接接入就能够了, 比较简单

安卓有坑! 而且这个坑很大! 网上材料比拟少. 过后做 rn 拆包的时候参考官网文档的打包代码如下所示:

node ./node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file index.js --bundle-output ./release-android/myCenter.bundle --assets-dest ./release-android/ --config bus.config.js

这个时候我把 bundle 和动态资源 (图片) 放在了安卓的:

(android) => (app) => (src) => (main) => (assets) => rn(新建的);

所有都看起来这么顺利这么美妙, 跑起来瞅瞅:
发现问题: 所有的图片都不展现!

通过各种翻看文档, 发现要把图片解压缩在:android => app => src => main => res => drawable-xhdpi 或者 drawable-xxhdpi里. 遂尝试之. 从新跑一下, 胜利显示!

遂通知 android 开发只须要执行下载更新的时候把 zip 下载结束了当前把图片解压缩到这个目录外面问题就解决了! 然而安卓开发给我反馈了一个令人丧气的音讯, 这个目录是 只读 的!Excuse Me!!! 只读, 特么的逗我?

没想到这个计划也不行, 真是坑爹啊!react-native官网也不见有提醒说混合开发的图片资源放哪里啊. 这可咋整! 吐槽结束之后问题还是要解决的, 通过不懈的各种查看文档, 到处 google,stackoverflow 冲浪, 终于功夫不费有心人, 找到了解决方案:
安卓须要把更新包解压缩至 sdcard 这个目录里!!!

踩了这么多的坑, 热更新的解决方案终于落地了:

安卓接入 react-native 的初始版本安卓会将根底包和业务包放在 assets 中. 而后当服务器上有 ZIP 的更新的时候会静默主动下载 ZIP 包, 解压缩至 sdcard 这个目录里. 缓存起来. 当前每次启动的时候就间接加载 sdcard 中的bundle. 至此即实现了混合开发中安卓端的热更新.
而 iOS 则就比较简单了, 看下面所述即可. 间接解压缩到沙盒目录中即可. 当然必定不能放到能够被用户手动革除到的中央. 例如:cache目录.

至此:react-native的混合开发之热更新就解决结束了. 有什么问题能够留言或者给我发邮件都能够.

参考资料:
混合开发是如何实现热更新的
react-native 热更新实现

❤️ 关注 + 点赞 + 珍藏 + 评论 + 转发 ❤️
原创不易，激励笔者创作更好的文章~

正文完