更改状态以呈现不同的远程图像 uri 时，如何停止图像闪烁？

Question

如果我有一个uris列表：

[
  https://example.com/pic1.jpg,
  https://example.com/pic2.jpg,
  https://example.com/pic3.jpg,
]

更改状态以从 0 切换到 1：

this.setState({ index: 1 })

并渲染该图像：

<Image style={...} source={{ uri: images[this.state.index] }} />

当 pic2.jpg 第一次出现时，它会有一个非常难看的闪烁。

我有一个场景，我希望用户加载第一个图像，然后点击以设置状态以查看其余图像。以某种方式预加载图像会很好，这样它们就可以无闪烁地显示。

有像https://github.com/DylanVann/react-native-fast-image这样的库在第一次加载后会很好用，因为它会被缓存，但我想在我还在的时候预加载其他 uri第一个uri状态。

Answer 1

哦，它正盯着我的脸。这恰好符合我的要求：