react-native-http-cache 使用

最新推荐文章于 2024-05-29 09:33:49 发布

跑跑堂

最新推荐文章于 2024-05-29 09:33:49 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： reactNative

本文链接：https://blog.youkuaiyun.com/u013089582/article/details/84031944

reactNative 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在React Native项目中安装和使用react-native-http-cache库进行HTTP缓存管理。首先通过npm安装并使用react-native link关联库。在iOS端，库会自动添加依赖。接着，在代码中引入库并学习如何获取或清除缓存。在实施过程中，可能会遇到WebStorm运行报错和Android运行报错的问题，文中提供了相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：安装

下载：npm install react-native-http-cache --save

关联：react-native link react-native-http-cache

二：使用

在关联成功之后，ios这边会自动添加依赖 libRCTHttpCache.a

首先在使用的类文件中引入

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

获取/清除

    // 获得缓存大小
    async getCacheSize() {
        const data = await CacheManager.getCacheSize();
        const size = data / (1024 * 1024);
        this.setState({ cacheSize: size.toFixed(2) + 'M'});
    }
    // 清除缓存
    async clearCacheSize() {
        await CacheManager.clearCache();
        // 这里貌似清除不能全部清除为0，这里直接写死0即可。
        this.setState({cacheSize: '0M'});
        Tips.show('清除缓存成功');
    }

三、遇到的问题

1）在引入之后，webStorm运行会报错Cannot read property 'clearCache' of undefined，用xcode打开显示错误是

（此图摘自点击这里，非常感谢）

原因是重复导入，修改办法注释掉图中那三个

（此图摘自点击这里，非常感谢）

2）运行安卓时会报如下错

解决办法：将下列代码覆盖掉Android下的 HttpCacheModule.java文件

package cn.reactnative.httpcache;
 
import android.content.Intent;
 
import com.facebook.cache.disk.DiskStorageCache;
import com.facebook.cache.disk.FileCache;
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.imagepipeline.core.ImagePipelineFactory;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.network.OkHttpClientProvider;
import okhttp3.Cache;
 
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.ArrayList;
 
/**
 * Created by tdzl2_000 on 2015-10-10.
 */
public class HttpCacheModule extends ReactContextBaseJavaModule {
    public HttpCacheModule(ReactApplicationContext context) {
        super(context);
    }
 
    @Override
    public String getName() {
        return "RCTHttpCache";
    }
 
    @ReactMethod
    public void clearCache(Promise promise){
        try {
            Cache cache = OkHttpClientProvider.getOkHttpClient().cache();
            if (cache != null) {
                cache.delete();
            }
            promise.resolve(null);
        } catch(IOException e){
            promise.reject(e);
        }
    }
 
    @ReactMethod
    public void getHttpCacheSize(Promise promise){
        try {
            Cache cache = OkHttpClientProvider.getOkHttpClient().cache();
            promise.resolve(cache != null ? ((double)cache.size()) : 0);
        } catch(IOException e){
            promise.reject(e);
        }
    }
 
    static Method update;
    private void updateCacheSize(DiskStorageCache cache) throws NoSuchMethodException, InvocationTargetException, IllegalAccessException {
        if (update == null){
            update = DiskStorageCache.class.getDeclaredMethod("maybeUpdateFileCacheSize");
            update.setAccessible(true);
        }
        update.invoke(cache);
    }
 
    @ReactMethod
    public void getImageCacheSize(Promise promise){
        FileCache cache1 = ImagePipelineFactory.getInstance().getMainFileCache();
        long size1 = cache1.getSize();
        if (size1 < 0){
            try {
                updateCacheSize((DiskStorageCache)cache1);
            } catch (Exception e){
                promise.reject(e);
                return;
            }
            size1 = cache1.getSize();
        }
        FileCache cache2 = ImagePipelineFactory.getInstance().getSmallImageFileCache();
        long size2 = cache2.getSize();
        if (size2 < 0){
            try {
                updateCacheSize((DiskStorageCache)cache2);
            } catch (Exception e){
                promise.reject(e);
                return;
            }
            size2 = cache2.getSize();
        }
        promise.resolve(((double)(size1+size2)));
    }
 
    @ReactMethod
    public void clearImageCache(Promise promise){
        FileCache cache1 = ImagePipelineFactory.getInstance().getMainFileCache();
        cache1.clearAll();
        FileCache cache2 = ImagePipelineFactory.getInstance().getSmallImageFileCache();
        cache2.clearAll();
        promise.resolve(null);
    }
}