React Native Image Cache(图片缓存库模块)详解(一)

尊重版权,未经授权不得转载

本项目来自wcandillon  文章来自江清清的技术专栏(http://www.lcode.org)

项目库地址:https://github.com/wcandillon/react-native-img-cache

(一).前言

很多朋友再问，React Native中图片加载怎么样每次打开都去下载一遍图片呢，图片缓存好差劲哈~正好今天给大家推荐讲解一下Image Cache组件模块库，该库主要用于React Native中图片缓存管理。

安装依赖方法:

?

1	npm install react-native-img-cache --save

react-native-fetch-blob

react-native-img-cache该库使用是需要依赖react-native-fetch-blob(点击进入该库:https://github.com/wkh237/react-native-fetch-blob)库。如果你的项目中还没有依赖fetch-blob项目，那么请先进入该库安装依赖文档(点击进入...)

React Native交流10群:157867561,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二).基本使用

2.1.CachedImage

CachedImage组件用于显示图片,该主要用于固定的图片地址，下载的图片主要存储在应用缓存中，显示的时候也是从应用缓存中读取。

?

1 2 3

import {CachedImage} from "react-native-img-cache" ;   <CachedImage source={{ uri: "https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg" }} />

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

?

1 2 3

import {CachedImage} from "react-native-img-cache" ;   <CachedImage source={{ uri: "https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg" }} mutable />

2.2.ImageCache

bust(uri)

ImageCache可以从本地缓存库中获取图片。

?

1	ImageCache.getCache().bust( "https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg" );

cancel(uri)

该方法可以用于取消正在下载图片的任务,该方法在图片滚动的时候特别有用。

?

1	ImageCache.getCache().cancel( "https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg" );

on(uri,observer,immutable)

ImageCache可以注册观察者到缓存模块中

?

1 2 3 4 5

const immutable = true ; const observer = (path: string) => {      console.log(`path of the image in the cache: ${path}`); }; ImageCache.getCache().on(uri, observer, immutable);

这边我们采用观察者模式而不是使用一个Promise回调的原因是，一个可变地址的图片在缓存中可能会有多种不同版本的URL路径。

dispose(uri,observer)

观察者可以通过dispose方法进行反注册

?

1	ImageCache.getCache().dispose(uri, observer);

React Native交流10群:157867561,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!