React Native图片缓存组件react-native-rn-cacheimage

徐兴昌

2023-12-01

额外推荐，RN常用第三方库https://zhuanlan.zhihu.com/p/69154149

共两种方案：

一、react-native-rn-cacheimage

今天介绍一个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 ，或者直接在文章下面提问。

推荐阅读

作者：Quenice
链接：https://www.jianshu.com/p/19ef9f32c332
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

二、react-native-img-cache

1. react-native-fetch-blob 将图片存在本地的一个东西

2. react-native-img-cache 自动缓存的一个东西

上面装好后就可以使用啦

import {CachedImage} from "react-native-img-cache";

<CachedImage source={{ uri: "https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg" }} />

如果想让图片有种加载效果

import Image from 'react-native-image-progress';

import ProgressBar from 'react-native-progress/Bar';

最后使用

import {CustomCachedImage} from "react-native-img-cache";

import Image from 'react-native-image-progress';

import ProgressBar from 'react-native-progress/Bar';

<CustomCachedImage

  component={Image}

  source={{ uri: 'http://loremflickr.com/640/480/dog' }} 

  indicator={ProgressBar} 

  style={{

    width: 320, 

    height: 240, 

  }}/>

链接：https://www.cnblogs.com/allenxieyusheng/p/9122747.html
来源：cnblogs
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

传送门：https://github.com/wcandillon/react-native-img-cache