Android 上的 React 原生图像在 uri 不变时永远不会重新加载

Question

尽管将新图像上传到s3托管url，但如果uri没有更改，<Image>组件将不会更新图像。据我所知，这只是Android的问题，因为对于iOS，你可以使用cache: 'reload'道具。

我已经采取了这样的解决方案:

<Image 
source={uri: imageUrlFromS3 + '?time=' + new Date(), cache: 'reload'}
style={width: 100, height: 100}
/>

通过向url添加无意义的查询，组件识别出uri已更改，然后刷新更新后的图像。同样，我通过将键更改为新的Date()来尝试这一点。由于过度渲染，这对性能来说似乎很糟糕。

这个问题似乎已经存在很长时间了。

我看到一些答案需要使用另一个包。

是否有另一种不需要使用另一个包的解决方案?

Answer 1

不连接当前的Date prop，您可以做的是创建一个状态，无论是否执行查询(更新图像的查询)，该状态都接受随机数的值，并将其连接到uri，如下所示:

// state to notify the updating image process
const [onUpdateImage, setOnUpdateImage] = useState(Math.random())
// Function that updates the image
const updateImageQuery = () => {
...
setOnUpdateImage(Math.random())
}
//Image Display:
<Image style={{ width: 133, height: 133, }}
source={{
uri: image_URL + "?" + onUpdateImage               
}}
/>

这样你可以优化应用程序的性能，只在必要的时候才重新渲染图像。如果图像暴露在其他屏幕，你可以创建onUpdateImage作为一个上下文，并在全局使用它。

希望这对你有帮助!

Answer 2

你只需要这样做:

source={uri: imageUrlFromS3 + '?' + new Date()}

Answer 3

您可以将unix时间戳子字符串，以便它可以每N毫秒重新呈现一次。

例如:source={uri: imageUrlFromS3 + '?' + Date.now().toString().substring(0,10) + "000" ...

意味着每1000毫秒重新渲染一次= 1秒。