image - 如何在 React Native 中清除图片的磁盘缓存

Question

我在使用image.prefetch方法的时候，想清理它的磁盘缓存，但是在React Native中没有找到合适的方法。

Answer 1

更新以澄清:React Native 目前没有公开一种方法来完成您需要的开箱即用的操作，您将不得不使用第三方解决方案。

因此，除了使用 native Image.prefetch()，您还可以使用我的高阶组件模块来升级 以处理缓存/永久存储，并完成此任务。

React Native Image Cache HOC

Tl;DR 代码示例:

import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
      </View>
  );
  }
}

第一个图像将被缓存，直到总本地缓存增长超过 15 MB(默认情况下)，然后缓存的图像最先被删除，直到总缓存再次低于 15 MB。

第二张图片将永久保存到本地磁盘。人们用它来代替您的应用程序传送静态图像文件。

如果你想像 Image.prefetch() 这样预热缓存

import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
CacheableImage.cacheFile('https://i.redd.it/hhhim0kc5swz.jpg')
  .then( localFileInfo => {
    console.log(localFileInfo);

    // Console log outputs:
    //{
    //  url: 'https://i.redd.it/rc29s4bz61uz.png',
    //  cacheType: 'cache', //add true as 2nd param to cacheFile() to make permanent
    //  localFilePath: '/this/is/absolute/path/to/file.jpg'
    //}

  });

然后当你想按要求从磁盘中清除它时:

import RNFetchBlob from 'react-native-fetch-blob';
RNFetchBlob.fs.unlink(localFilePath.localFilePath)
  .then(() => {
    console.log('file deleted!');
  });

希望对你有帮助!