防止 React Native 缓存本地图像答案

【问题标题】：Prevent React Native from caching local images防止 React Native 缓存本地图像
【发布时间】：2018-03-05 08:37:35
【问题描述】：

我有一个应用大量使用来自 React Native 的 Image 组件。

我知道缓存对远程图像有好处，但我需要加载定期更改的本地图像。

Image 组件正在缓存文件并显示缓存的版本，即使本地文件发生更改。

问题是如何禁用本地文件的缓存但保留远程 URL（因为我混合了本地和远程）？

我会给出一个代码示例，但实际上它很简单

<Image source={{uri: 'file://image.png'}} />

注意：这些文件是由应用程序中的操作创建和更改的，因此require('image.png') 不会删除它。我一直将它用于静态图像并且效果很好，但它是静态的而不是动态的。

我还看到了有关字符串末尾的随机查询参数的答案。总的来说，这很 hacky，所以我不会雇用你来工作 :) 但除此之外它显然不起作用。

提前干杯！

根据评论和答案非常清楚......当图像文件发生变化时。它需要立即更改图像组件，因此需要清除缓存和状态并显示新图像。

【问题讨论】：

似乎源属性有一个缓存属性，其中包含重新加载、强制缓存、仅当重新加载选项。我尝试了重新加载，这可能正在纠正它，但是当我在反应导航中切换屏幕时，没有触发重新加载。很高兴听到有实际解决方案的人的意见

【解决方案1】：

回答有点晚，但您可以在变量中添加查询 "?time=new Date()"，如下所示：

 const [profilePicture] = useState(`${baseURL}${user.infoUser.image_profile}?time=${new Date()}`);

这个的主要问题是每次都会刷新图像，因此显示图像的延迟可能会很高。

【讨论】：

【解决方案2】：

捕捉对您的应用有好处，因此您不想停下来。解决此类问题的方法是更改图像的名称以及图像本身。更改图像而不更改名称将无济于事。

你可以有这样的东西

<Image source={{uri: `file://${imageName}`}} />,

这是您发布的唯一一段代码，所以我真的无法提出更多建议。

更好的是，您可以将imageName 存储为状态的一部分，以便能够随时重新渲染到不同的状态。

<Image source={{uri: `file://${this.state.imageName}`}} />

【讨论】：

【解决方案3】：

我认为问题在于图像资源本身的更改没有侦听器（而且我认为也没有相应的库）。如果您不想更改文件的名称，唯一可能的解决方案是触发事件（或状态/redux - 更改）以强制组件在每次更改代码中的图像时重新加载。

否则，您必须编写自己的库，该库始终侦听图像更改并在发生更改时重新加载组件。

【讨论】：

行得通！我更改了图像或 URL 本身的键，并在 ios 上将 cache=reload 设置为图像的源属性。我还意识到在图像实际保存到磁盘之前我正在更新状态，这让我认为它没有工作 - 它正在重新加载旧图像。这让我慢了一点，但我会接受这是正确的答案，因为触发状态更改会导致重新渲染。
我接受这个答案，即使它在技术上不是一个确切的答案。这可能是我能得到的最接近的结果，而且我确实设法解决了我的问题。