React Native清除緩存實現

清除緩存使用的第三方：react-native-http-cache

 

Github： https://github.com/reactnativecn/react-native-http-cache

 

社區討論： http://bbs.reactnative.cn/topic/150/%E7%BC%93%E5%AD%98%E7%AE%A1%E7%90%86/9

 

界面實現如下：

 

1.導入框架： 

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

2.確保庫添加上，沒有添加自己添加下：

3.報錯如下，解決方式：

一看就曉得這個是重復導入引起的。注釋重復導入的組件即可。

 

4.具體清除緩存代碼：

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();
        // this.getCacheSize();
        // 這里貌似清除不能全部清除為0，這里直接寫死0即可。
        this.setState({cacheSize: '0M'});
        alert('清除緩存成功');
    }

這里直接使用state存儲cacheSize即可。最后有些會沒有清除，這里直接寫死即可，反正緩存不大😄😄

注意：直接使用Github上提供的方法報錯。使用上面即可。

 // 注意： 這里依照官方Demo報錯，修改如下方法即可。
    // async getData(){
    //     try {
    //       this.setState({
    //         'http': await httpCache.getHttpCacheSize(),
    //         'image': await httpCache.getImageCacheSize(),
    //         'all': await httpCache.getSize(),
    //       });
    //     } catch(err){
    //       alert('錯誤', err.message);
    //     }
    //   }
    // async clearCache(){
    //     try {
    //       await httpCache.clear();
    //       alert('清除緩存成功');
    //       await this.getData();
    //     } catch(err){
    //       alert('錯誤', err.message);
    //       console.log('----'+ err.message + '-----'); // httpCache.clear is not a function
    //     }
    //   }