React Native 清空Android图片缓存

在RN中Android项目中通过Image标签去显示网络图片，但是由于RN原生并没有提供去清除缓存的api，所以需要自己去Android封装原生方法。

RN Android图片存放

在RN的Android端,Image标签是实现原理是Fresco(一个Android端的图片加载框架),所以如果需要进行图片缓存清空，只需要调用Fresco的方法，然后再由js代码调用即可。

代码实现

原生端：

/**
 * 原生模块
 */
public class ImgCacheModule extends ReactContextBaseJavaModule {

    public ImgCacheModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    /**
     *
     * @return js调用的模块名
     */
    @Override
    public String getName() {
        return "ImgCacheModule";
    }


    /*
        清除缓存
     */
    @ReactMethod
    public void clearImgCache( Callback success,Callback error) {
        try {
            ImagePipeline imagePipeline = Fresco.getImagePipeline();
            imagePipeline.clearMemoryCaches();
            imagePipeline.clearDiskCaches();

            // combines above two lines
            imagePipeline.clearCaches();
            success.invoke("删除成功");
        }
        catch (Exception e){
            error.invoke("删除失败");
        }
    }

    /*
        查看缓存区大小
     */
    @ReactMethod
    public void getImgCache( Callback success,Callback error) {
        try {

         //   Fresco.getImagePipelineFactory().getMainFileCache().trimToMinimum();
            Fresco.getImagePipelineFactory().getMainFileCache().trimToMinimum();
            long size = Fresco.getImagePipelineFactory().getMainFileCache().getSize();//b

            success.invoke(size+"");
        }
        catch (Exception e){
            e.printStackTrace();
            error.invoke("获取失败");
        }
    }
}

js端：

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    NativeModules,
    Image,
    View
} from 'react-native';


export default class CacheDemo extends Component {
    constructor(props){
        super(props);
        this.state={
            imgCache: '0'
        }

    }

    _clickShowImgCache(){
        NativeModules.ImgCacheModule.getImgCache((size)=>{this.setState({imgCache:size});alert('获取成功');},(error)=>{alert(error)});
    }
    _clickClearImgCache(){
        NativeModules.ImgCacheModule.clearImgCache((success)=>{ NativeModules.ImgCacheModule.getImgCache((size)=>{this.setState({imgCache:size})},(error)=>{});alert(success)},(error)=>{alert(error)});
    }
    render() {
        return (
            
            
            
                获取缓存
                {this.state.imgCache+'b'}
                清除缓存

            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        flexDirection: 'column'
    }

});

AppRegistry.registerComponent('CacheDemo', () => CacheDemo);

实现效果

cache.gif