react native 清除缓存

1、安装react-native-http-cache

npm install react-native-http-cache --save

2、Linking Libraries

react-native link react-native-http-cache

执行这个命令之后，Android和iOS项目都会把库链接进去。

link 成功.png

(PS: 如果该命令添加失败的话，需要自己在Xcode或者Android Studio 手动添加。)

3、分别配置Android平台和iOS平台

我也是按照github的文档配置的。

3.1 Android

把项目里面的android目录拖进Android Studio

3.1.1、修改MainApplication.java文件

image.png

3.1.2、Android 修改 HttpCacheModule.java文件

(目录为node_modules>react-native-http-cache>android>src>main>java>cn>reactnative>httpcache>HttpCacheModule.java)

//将69改成：
FileCache cache1 = ImagePipelineFactory.getInstance().getMainFileCache();
/将80行改成：
FileCache cache2 = ImagePipelineFactory.getInstance().getSmallImageFileCache();

如果不修改以上2个方法，会显示如下报错：

image.png

3.2、iOS

把项目里面的ios目录拖进Xcode

ios修改.png

4、在react native 项目使用react-native-http-cache

import * as CacheManager from 'react-native-http-cache';

我把CacheManager打印了一下，可以看到它有这些方法：

image.png

以下方法返回的是一个 promise 对象

方法	说明
CacheManager.clearCache()	清除缓存
CacheManager.clearHttpCache()	清除网络缓存
CacheManager.clearImageCache()	清除图片缓存
CacheManager.getCacheSize()	返回网络缓存大小和图片缓存大小
CacheManager.getImageCacheSize()	获取图片缓存
CacheManager.getHttpCacheSize()	获取网络缓存

    //获取缓存
    getCache(){
        CacheManager.getCacheSize().then(res=>{
            let cacheSize = Math.round((res / 1024 / 1024) * 100) / 100 + 'M';
            this.setState({
                cacheSize
            })
        },err=>{
            console.log(err)
        })
    }
    //清除缓存
    clearCache(){
        CacheManager.clearCache();
        this.setState({
            cacheSize: '0M'
        })
    }

经测试，清楚缓存之后，还是会有0.15M 。为了界面好看点，我在上面的代码中直接设置清除缓存后为0M了。

image.png