今天介绍一个 React Native 的图片缓存组件 react-native-rn-cacheimage https://github.com/quenice/react-native-cacheimage , 纯 JS 实现, 所以兼容性很好.
大家都知道, 其实 React Native 的 Image 组件在 iOS 端实现了缓存, 而 Android 端仍未实现, 而且, 就算实现了 iOS 端 , 可能有些需求仍然比较难实现, 比如一般 App 都有一个 清除缓存 的功能, 如果我们使用默认的 Image 的缓存实现, 我们能难定位图片到底缓存在本地文件系统的哪个目录. react-native-rn-cacheimage https://github.com/quenice/react-native-cacheimage 的实现方式是, 把所有的缓存图片都放在一个指定的文件夹下, 并提供了一个方法 CacheHelper.clearCache() 方法能够轻松清除缓存.
下面我们就来介绍下它的安装及使用
安装
rn-fetch-blob
react-native-rn-cacheimage https://github.com/quenice/react-native-cacheimage 使用到了 https://github.com/joltup/rn-fetch-blob 这个 package, 由于 https://github.com/joltup/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 https://github.com/quenice/react-native-cacheimage 就介绍到这里, 如果大家想要详细了解, 可以直接去 GitHub 上查看具体说明及源码, 如果发现 bug 可以可以直接提 issue , 或者直接在文章下面提问.
来源: https://juejin.im/post/5bc894e0e51d450e6a2e80e6