今天介绍一个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 所产生的缓存文件。
最后
这个图片缓存组件 react-native-rn-cacheimage 就介绍到这里，如果大家想要详细了解，可以直接去 Github 上查看具体说明及源码，如果发现bug可以可以直接提 issue ，或者直接在文章下面提问。
网友评论