React Native 中图像组件中的缓存问题答案

【问题标题】：Caching issue in Image Component in React NativeReact Native 中图像组件中的缓存问题
【发布时间】：2019-12-02 11:44:14
【问题描述】：

使用图像组件在 React Native 中显示来自外部服务器的图像。但是如果我们在服务器中使用相同的 URI 更改图像，则图像不会更新。如果我们对 URI 使用查询字符串，它会重新加载更新的图像。以下代码有效

<Image
  style={styles.logo}
  source={{ uri: this.state.photoURL + '?' + new Date() }}
/>

上述代码是否为每次重新渲染缓存图像并占用内存？ React 图像组件默认缓存以及缓存如何在图像组件中工作？考虑到服务器中的缓存和更新图像，在本机反应中处理图像的最佳方法。

【问题讨论】：

【解决方案1】：

是的，上面的示例将在组件的每次重新渲染时缓存一个新图像。它不会吃掉内存，它会吃掉手机上的存储空间。

您可以在此处阅读有关缓存 RN Image 组件的更多信息（目前仅 iOS 也支持缓存）：https://facebook.github.io/react-native/docs/images#cache-control-ios-only

如果您想拥有适合 Android 的图像缓存解决方案，则需要使用第三方包或编写自己的解决方案。

您通常希望管理缓存控制的方式是使用时间戳，就像您所做的那样。但是，您不会使用Date() 来动态生成时间戳并强制应用程序查找新图像。

我假设您从某个 API 获取图像 url。将上次更新图像的时间戳包含在响应中，因此this.state.photoURL 本身已经附加了?${lastUpdatedTimestamp}。

或者让 API 返回照片对象而不是照片 url，如下所示：

{
  ...
  photo: {
    url: "https://someserver.com/some/image.png",
    updatedAt: "1569110591504"
  }
}

然后你就可以了

<Image source={{ uri: `${requestData.photo.url}?${requestData.photo.updatedAt}` }} />

【讨论】：