在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);