更改状态以渲染不同的远程图像uris时如何停止图像闪烁？

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状态时预加载其他uris。

Answer 1

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