All Articles

ReactNative图片加载JS组件封装

0. 前言 & 问题

图片加载在一款移动应用里应该算是很正常的需求,而带缓存的图片其实也是必须的。而RN自身是不带这样的工具库的,RN的Image标签实现是必须给一张做在移动应用代码库里的静态图片,或者直接使用一个URL进行网络下载。前者的这种做法就没办法进行网络资源热更新的解决方案,后者Image标签的实际表现非常糟糕,同一个页面的多次进入可能会进行巨量的图片下载,导致大量图片框什么东西都显示不出来。当然你可以说你可以对页面的显示堆栈做调整,多次重入不进行重新绘制,当然这也是一个解决方案,但你也不能否认多次重绘也是一个正当需求。

所以现在的问题很简单:RN应用需要一个可以对网络图片进行单次下载后缓存的图片显示库。

1. 开源方案

网络找了一圈基本上有几款热门的开源产品,但基本上都或多或少都有点问题。因此最后我开始自行封装制作库。

2. JS实现的问题

使用RNFS库进行文件操作,自己在JS中封装组件:检查本地文件,存在直接渲染,不存在则网络请求下载图片到本地磁盘。这个设计是没问题,但实际实现出来我发现一堆问题,最关键的是RN的软肋,多线程。

RN的运行时是一个JS线程,业务、渲染、网络等等都是走这个线程,如果在JS中编写上述的组件,最终结果就是图片永远只能一张一张下载,而且一张一张显示,效果别提多恶心了。RN官方的Image其实也是在底层原生代码中做了多线程下载这块。

3. 结论

只能在原生的iOS或Android系统中进行多线程及文件存储、检查的图片库开发,然后在JS里做桥接。

我这里就不麻烦了,直接把图片都打包在应用里,做整包更新。图片代码所有的source都直接require本地文件。

EOF

Published 2017/11/8

Some tech & personal blog posts