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 (
            <View style={styles.container}>
            <Image style={{width:100,height:100}} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
            <Image style={{width:100,height:100}} source={{uri: 'http://ac-c6scxa78.clouddn.com/f6b64dc4bf7bee56.jpg'}}/>
                <Text onPress={this._clickShowImgCache.bind(this)} >获取缓存</Text>
                <Text >{this.state.imgCache+'b'}</Text>
                <Text onPress={this._clickClearImgCache.bind(this)} >清除缓存</Text>

            </View>
        );
    }
}

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

});

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


实现效果

cache.gif
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容