1.
>>>缓存库介绍<<<
很多朋友再问,React Native中图片加载怎么样每次打开都去下载一遍图片呢,图片缓存好差劲哈~正好今天给大家推荐讲解一下Image Cache组件模块库,该库主要用于React Native中图片缓存管理。
安装依赖方法:
react-native-fetch-blob
react-native-img-cache该库使用是需要依赖react-native-fetch-blob(点击进入该库:github.com/wkh237/reac…)库。如果你的项目中还没有依赖fetch-blob项目,那么请先进入下面该库安装依赖文档:
https://github.com/wkh237/react-native-fetch-blob#user-content-installation
2.
>>>使用说明<<<
2.1.CachedImage
CachedImage组件用于显示图片,该主要用于固定的图片地址,下载的图片主要存储在应用缓存中,显示的时候也是从应用缓存中读取。

其实mutable的属性是代表图片的地址会随着时间的改变发生变化,地址不固定。那么该缓存的生命周期应用的运行时期并且该可以通过ImageCache模块进行手动管理。

2.2.ImageCache
bust(uri)
ImageCache可以从本地缓存库中获取图片。
ImageCache.getCache().bust("https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg");
cancel(uri)
该方法可以用于取消正在下载图片的任务,该方法在图片滚动的时候特别有用。
ImageCache.getCache().cancel("https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg");on(uri,observer,immutable)
ImageCache可以注册观察者到缓存模块中

这边我们采用观察者模式而不是使用一个Promise回调的原因是,一个可变地址的图片在缓存中可能会有多种不同版本的URL路径。
dispose(uri,observer)
观察者可以通过dispose方法进行反注册
ImageCache.getCache().dispose(uri, observer);
附:缓存库相关文章
1.
>>> 说明<<<
原文地址:https://hackernoon.com/image-caching-in-react-native-96d8df33ca84#.uaznyr11h
我最近正在开发一个React Native项目,同时想要给大家分享一个方法库,可以在图片显示的时候更加的平滑,以此来提升用户体验。该使用的库就是react-native-img-cache
项目实现的效果如下:

以上的动态效果中,会有头像,列表上面的图片等多种图片类型
2.
>>> 自定义图片处理<<<
针对用户自定义生成的图片(例如:app的用户上传的图片),我们有两种缓存策略:immmutable和mutable。immutable缓存策略用于图片地址不变的情况,反之mutable用于图片地址经常变化的情况。但是我们为什么同时需要这两种策略呢?让我们来看下面的用户配置项。

如上界面效果:当我们显示用户资料头像的时候,该图片通过后台服务器提供。然后当我们需要显示列表中的图像信息的时候,只需要显示用户头像的缩略图即可,并不需要发送额外的请求到后台服务器。
不可变的图片需要依靠后台服务器提供的最新图片的URL地址,在上面个人头像的案例中,后台可能会返回如下的信息:

缓存这些头像图片是非常便捷的,通过图片URL地址的哈希串号,我们可以检测本地缓存文件中是否存在该图片,然后进行相关处理。下面就是采用react-native-fetch-blob库下载图片,然后进行缓存处理的实例。

针对可变的图片,我们需要实现一个observable接口。针对APP应用中的每一个URL,该监听着会观察到在本地缓存中的图片当前的路径。如果图片被下载,那么该观察者就会收到图片的本地当前路径。

下面的代码片段显示了如何在React Native组件实现IIMageCache的方法。

实现IImageCache接口类,可以实现同时不下载相同的图片。同时在接口方法中添加一个额外的immutable的参数来进行设置缓存策略。

针对具体的ImageCache的实现效果代码可以在react-native-img-cache库中找到
3.
>>> 静态资源图片处理<<<
针对静态图片资源,同时这边也提供一个小小的react-native-static-images库用来扫描应用的图片文件夹,然后生成包含应用中所有的静态图片资源路径的类。可以看如下一个实例:

但是如果用户使用的是旧版本的应用,后台可能会引用到部分静态资源,但是这些图片没有在已安装的应用中。如果是这种情况,那我们就必须下载远程图片了,具体做法如下:
