github: https://github.com/reactnativecn/react-native-http-cache
android:
npm install react-native-http-cache --save
react-native link react-native-http-cache
Android 修改 HttpCacheModule.java 文件
将69、80行分别改为:
FileCache cache1 = ImagePipelineFactory.getInstance().getMainFileCache();
FileCache cache2 = ImagePipelineFactory.getInstance().getSmallImageFileCache();
iOS 修改
CacheManager.getCacheSize() 返回网络缓存大小和图片缓存大小
CacheManager.getImageCacheSize() 获取图片缓存 返回的是一个 promise 对象
CacheManager.getHttpCacheSize() 获取网络缓存 返回的是一个 promise 对象
CacheManager.clearImageCache() 清除图片缓存 返回的是一个 promise 对象
CacheManager.clearHttpCache() 清除网络缓存 返回的是一个 promise 对象
CacheManager.clearCache() 清除缓存
CacheManager.getImageCacheSize()
.then(data=> {
data = data / (1024 * 1024);
this.setState({
imageCacheSize: data.toFixed(2) + 'M',
})
console.log('图片缓存' + data)
})
.catch(err => {
console.log(err)
})
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import * as CacheManager from 'react-native-http-cache';
export default class Cache extends Component {
constructor(props){
super(props);
this.state = {
imageCacheSize: 0,
httpCacheSize: 0,
size: 0,
};
}
componentDidMount(){
CacheManager.getImageCacheSize()
.then(data=> {
data = data / (1024 * 1024);
this.setState({
imageCacheSize: data.toFixed(2),
})
console.log('图片缓存' + data)
})
.catch(err => {
console.log(err)
})
CacheManager.getHttpCacheSize()
.then(data=> {
data = data / (1024 * 1024);
this.setState({
httpCacheSize: data.toFixed(2),
})
console.log('网络缓存' + data)
})
.catch(err => {
console.log(err)
})
}
render() {
let { imageCacheSize,httpCacheSize,size } = this.state;
size = (imageCacheSize * 1 + httpCacheSize * 1).toFixed(2);
// this.setState({size:size})
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.welcome}>图片缓存大小:{imageCacheSize}M</Text>
<Text style={styles.welcome}>网络缓存大小:{httpCacheSize}M</Text>
<Text style={styles.welcome}>缓存:{size}M</Text>
<View style={{flexDirection:'row',padding: 10,justifyContent:'space-around'}}>
<Image
style={{width: 80,height: 80,marginRight:10}}
source={{uri:"http://b.hiphotos.baidu.com/image/h%3D300/sign=5a28a3caf1039245beb5e70fb795a4a8/b8014a90f603738d30915925be1bb051f919ecda.jpg"}}
/>
<Image
style={{width: 80,height: 80,marginRight:10}}
source={{uri:"http://b.hiphotos.baidu.com/image/h%3D300/sign=b48b76f776899e51678e3c1472a6d990/e824b899a9014c08ef778daf077b02087bf4f468.jpg"}}
/>
<Image
style={{width: 80,height: 80}}
source={{uri:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2723310483,865690233&fm=26&gp=0.jpg"}}
/>
</View>
<Text style={styles.welcome}
onPress={() => {
CacheManager.clearImageCache()
.then(data => {
if(data == null){
console.log(data)
this.setState({imageCacheSize: '0.00M'})
}
})
.catch(err => {
console.log(err)
})
}}
>
清除图片缓存
</Text>
<Text style={styles.welcome}
onPress={() => {
CacheManager.clearHttpCache()
.then(data => {
if(data == null){
console.log(data)
this.setState({httpCacheSize: '0.00M'})
}
})
.catch(err => {
console.log(err)
})
}}
>
清除网络缓存
</Text>
<Text style={styles.welcome}
onPress={() => {
CacheManager.clearCache();
this.setState({
imageCacheSize: '0.00',
httpCacheSize: '0.00',
size: '0.00',
})
}}
>
清除缓存
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
paddingTop: Platform.OS == 'ios' ? 35 : null,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
清除缓存的话,有些会没有清除完,可以直接写死,反正缓存不大