React Native - 图像缓存答案

【问题标题】：React Native - Image CacheReact Native - 图像缓存
【发布时间】：2016-12-06 05:46:20
【问题描述】：

我在这个网站上阅读了关于 React Native 图像组件的文档并得到了一些问题：https://facebook.github.io/react-native/docs/image.html

如果我使用源属性来显示图像。图片下载后会缓存保存到磁盘吗？
如果是，缓存策略是什么？
如果我想将下载的图像保存到磁盘。是用getSize还是prefetch方法更好？

非常感谢。

【问题讨论】：

希望对你有帮助stackoverflow.com/a/58799748/9908240

标签： react-native

【解决方案1】：

反应原生图像组件 NSURLRequest 的缓存策略，如 here 所述。我个人使用 RNFetchBlob 来缓存图像，如here 所述。您也可以结帐this component。

【讨论】：

【解决方案2】：

您可能对我的高阶组件模块感兴趣，它为原生组件添加了与性能相关的图像缓存和“永久缓存”功能。

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。

第二个图像将永久存储到本地磁盘。人们将其用作与您的应用一起运送静态图像文件的替代品。

这应该可以满足您开箱即用的要求。希望对您有所帮助！

【讨论】：

嗨，如果我使用<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} /> 并保存图像，然后我断开网络。如果我使用<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />，图像将显示？
@ItaloRodrigo 是的。图像文件保存到本地磁盘，只要将 Permanent 属性设置为 true，就永远不会删除本地文件（如果本地存在文件，CacheableImage 会首先使用该文件而不是访问网络）。如果你不设置permanent prop为true，本地文件可能会从本地缓存中删除，然后再次访问网络以再次拉取远程图像文件。
@ItaloRodrigo 另外，您可以使用 CacheableImage.cacheFile() 静态方法 (github.com/billmalarky/…) 下载远程图像，而不是使用组件渲染一次并将文件下载到本地磁盘以编程方式保存到本地磁盘。如果您打算以编程方式下载大量图像，我还建议您使用我的队列 (github.com/billmalarky/react-native-queue)。
@ItaloRodrigo 如果您需要缓存 json 响应，我会使用 AsyncStorage 存储它。 AsyncStorage.setItem('cacheKey', '{"exampleJson":2}');然后稍后通过以下方式拉出缓存： const jsonCache = await AsyncStorage.getItem('cacheKey');更多信息：facebook.github.io/react-native/docs/asyncstorage.html
对于高级数据存储，使用 redux 和 redux-persist。

【解决方案3】：

FastImage 最适合图像缓存

yarn add react-native-fast-image

参考：https://github.com/DylanVann/react-native-fast-image

它的最大 props 表现得像 React 原生图像属性

import FastImage from 'react-native-fast-image'


<FastImage
    style={{ width: 200, height: 200 }}
    source={{ uri: 'https://unsplash.it/400/400?image=1' }}
    resizeMode={FastImage.resizeMode.stretch}

/>

【讨论】：

【解决方案4】：

流程

React Native 会在下载和解码后缓存图像。

缓存策略

过期时间

2.使用位图大小作为缓存成本；默认情况下，React Native iOS 中总缓存容量为 20MB

iOS 中 NSCache 中的未知存储和驱逐策略

在How Image Loader and Cache work in React Native under the hood中查看更多信息

【讨论】：