React Native图片缓存组件

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

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

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

安装

rn-fetch-blob

react-native-rn-cacheimage 使用到了 rn-fetch-blob 这个package，由于 rn-fetch-blob 的实现涉及到了 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 = ReduxStore

class MyApp extends React.Component {
    componentDidMount() {
        CacheHelper.register({overwrite:false}).catch(e => console.log(e))
    }
    
    componentWillUnmount() {
        CacheHelper.unregister().catch(e=>console.log(e))
    }

    render() {
        return (
            <Provider store={store}>
                <App/>
            </Provider>
        )
    }
}

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 
		(
		<View>
		<CacheImage
			source={{uri:'https://xxx.xxx'}}
			defaultSource={require('/xxx/xxx.png')}
			style={styles.image}
		/>
		<CacheImage
			source={{uri:'https://xxx.xxx'}}
			defaultSource={require('/xxx/xxx.png')}
			style={styles.image}
		>
			<Text>Hello World!</Text>
		</CacheImage>
		</View>
		)
		
	}
...
}
复制代码

AnimatedCacheImage组件

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

import {AnimatedCacheImage} from 'react-native-rn-cacheimage'

export default class Example extends React.Component {
...
	render() {
		
		return 
		(
		<View>
		<AnimatedCacheImage
			source={{uri:'https://xxx.xxx.png'}}
			defaultSource={require('/xxx/xxx.png')}
			style={styles.image}
		/>
		</View>
		)
		
	}
...
}
复制代码

CacheHelper的API

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

getCacheSize():Promise<Number>

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

getCacheSizeFormat():Promise<String>

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

clearCache():Promise<Void>

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