Question

我有一个应用程序，它大量使用React Native中的Image组件。

我知道缓存适用于远程图像，但我需要加载定期更改的本地图像。

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

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

我会给出一个代码示例，但字面上它就像

一样简单

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

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

我还在字符串末尾看到了有关随机查询参数的答案。一般来说这非常黑客，所以我不会雇佣你去找工作:)但除此之外，它显然不起作用。

提前干杯！

在图像文件发生变化时，根据提交和远处的答案真正清楚。它需要立即更改图像组件，因此需要清除缓存和状态，并显示新图像。

Answer 1

抓取对您的应用有好处，因此您不想停下来。解决这类问题的方法是更改图像的名称以及图像本身。在不更改名称的情况下更改图像将不起作用。

你可以有这样的东西

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

这是您发布的唯一代码，因此我无法提出更多建议。

更好的是，您可以将imageName存储为状态的一部分，以便能够在您想要的任何时间重新渲染到其他地方。

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

Answer 2

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

否则你必须编写自己的库，它总是监听图像更改并重新加载组件，以便更改某些内容。

Answer 3

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

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

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