今天介绍一个React Native的图片缓存组件，纯JS实现，所以兼容性很好。

大家都知道，其实React Native 的 Image 组件在 iOS 端实现了缓存，而android 端仍未实现，而且，就算实现了 iOS端，可能有些需求仍然比较难实现，比如一般APP都有一个 清除缓存 的功能，如果我们使用默认的 Image 的缓存实现，我们能难定位图片到底缓存在本地文件系统的哪个目录。的实现方式是，把所有的缓存图片都放在一个指定的文件夹下，并提供了一个方法 CacheHelper.clearCache() 方法能够轻松清除缓存。

下面我们就来介绍下它的安装及使用

安装

rn-fetch-blob

使用到了这个package，由于的实现涉及到了 native 代码，所以安装会比较复杂，强烈建议按照来安装。当然，一般情况下使用以下两个命令来安装就可以：

$ npm install rn-fetch-blob --save$ react-native link rn-fetch-blob复制代码

如果有问题，建议按照的手动link的方式来安装。

react-native-rn-cacheimage

由于这个package本身是纯 js 来实现的，没有涉及iOS 和 android 的本地代码，所以安装很简单：

$ npm install react-native-cacheimage --save复制代码

使用

Register和unregister

在使用 CacheImage 和 AnimatedCacheImage 之前，需要初始化相关信息，建议在APP嘴顶层的 component 的 componentDidMount() 中初始化

在APP的顶层 component 的componentWillUnmount()中，执行清除任务

具体操作，见如下代码：

import React from 'react'import {AppRegistry} from 'react-native'import {Provider} from 'react-redux'import ReduxStore from './src/configuration/reduxStore'import App from './src/App'import {CacheHelper} from "react-native-rn-cacheimage";const store = ReduxStoreclass MyApp extends React.Component {    componentDidMount() {        CacheHelper.register({
   overwrite:false}).catch(e => console.log(e))    }        componentWillUnmount() {        CacheHelper.unregister().catch(e=>console.log(e))    }    render() {        return (            
                    
                 
            )    }}AppRegistry.registerComponent("YourAppName", () => MyApp);复制代码

使用CacheImage和AnimatedCacheImage组件

CacheImage组件

CacheImage 组件可以代替原有的 Image 及 ImageBackground 组件使用，并且 props 与Image 及 ImageBackground 参数保持一致.

import {CacheImage} from 'react-native-rn-cacheimage'export default class Example extends React.Component {...	render() {				return 		(		
    		
     		
     			
      
       Hello World!
      		
     		
    		)			}...}复制代码

AnimatedCacheImage组件

AnimatedCacheImage 可以代替 Animated.Image组件，并且所有参数与 Animated.Image 保持一致

import {AnimatedCacheImage} from 'react-native-rn-cacheimage'export default class Example extends React.Component {...	render() {				return 		(		
    		
     		
    		)			}...}复制代码

CacheHelper的API

CacheHelper 是一个辅助类，里面包含一些工具方法，大家可以根据自己的需求，选择调用。这里就不全部列出来，大家可以直接到 Github 上

getCacheSize():Promise<Number>

获取所有的缓存图片所占用内存大小，返回的数字结果单位是byte

getCacheSizeFormat():Promise<String>

这个与 getCacheSize() 很相似，只不过它的返回结果是已经格式化好的，比如：10.2MB，98KB

clearCache():Promise<Void>

清空缓存。一般我们APP都会有一个清空缓存的功能，我们可以调用这个方法清空我们使用这个 package 所产生的缓存文件。

最后

这个图片缓存组件就介绍到这里，如果大家想要详细了解，可以直接去 Github 上查看具体说明及源码，如果发现bug可以可以直接提 issue ，或者直接在文章下面提问。

安装