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

1. 前言

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

2. HOW

具体怎么做呢?首先当然是咱们须要打包各平台对应的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,解压缩即可

2.1. 问题

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

2.2. iOS

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

2.3. Android

安卓有坑!而且这个坑很大!网上材料比拟少.过后做 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 这个目录里!!!

3. 热更新终极解决方案

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

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

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

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

4. 结束语

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