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

朴灿烈づ我的快乐病毒、 2022-12-17 12:57 302阅读 0赞

> 额外推荐，RN常用第三方库[https://zhuanlan.zhihu.com/p/69154149][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` 代码，所以安装会比较复杂，强烈建议按照 [官方安装手册][Link 1] 来安装。当然，一般情况下使用以下两个命令来安装就可以：

$ npm install rn-fetch-blob --save
    $ react-native link rn-fetch-blob

如果有问题，建议按照[官方安装手册][Link 1] 的手动`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` 上 [查看][Link 2]

### getCacheSize():Promise<Number> ###

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

### getCacheSizeFormat():Promise<String> ###

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

### clearCache():Promise<Void> ###

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

# 最后 #

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

# 推荐阅读 #

*  [开发自己的react-native组件并发布到npm][react-native_npm]
 *  [ReactNative字体大小不随系统字体大小变化而变化][ReactNative]
 *  [微信小程序image加载前显示默认占位图][image]
 *  [Linux(Ubuntu 64)下安装GIt并配置连接GitHub][Linux_Ubuntu 64_GIt_GitHub]
 *  [解决Nginx中location匹配不到末尾不加斜杠的URL][Nginx_location_URL]

作者：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';

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

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

[https_zhuanlan.zhihu.com_p_69154149]: https://zhuanlan.zhihu.com/p/69154149
[react-native-rn-cacheimage]: https://github.com/quenice/react-native-cacheimage
[rn-fetch-blob]: https://github.com/joltup/rn-fetch-blob
[Link 1]: https://github.com/joltup/rn-fetch-blob#user-content-installation
[Link 2]: https://github.com/quenice/react-native-cacheimage#api
[react-native_npm]: https://www.jianshu.com/p/091a68ea1ca7
[ReactNative]: https://www.jianshu.com/p/d2f9ce14127a
[image]: https://www.jianshu.com/p/2ddbdb6c6b6d
[Linux_Ubuntu 64_GIt_GitHub]: https://www.jianshu.com/p/6c61b13e8bdb
[Nginx_location_URL]: https://www.jianshu.com/p/208a3b0f7625
[react-native-img-cache]: https://github.com/wcandillon/react-native-img-cache
[https_www.cnblogs.com_allenxieyusheng_p_9122747.html]: https://www.cnblogs.com/allenxieyusheng/p/9122747.html