一种更好，更有效的预加载GIF /图像的方法

Question

我有一个基本的gif交换到另一个gif，点击时从5的列表中随机选择。只需使用一个<Image />并更改其来源，就会导致它在加载时从视图中消失。

为了防止这种情况，我试图在将其他GIF的尺寸设置为0x0时预加载我需要的所有GIF，如下所示。

const gifs = [
  { src: require('../../assets/animate1.gif') },
  { src: require('../../assets/animate2.gif') },
  { src: require('../../assets/animate3.gif') },
]
const showIndex = 1

// within the render function
<TouchableWithoutFeedback onPress={this.changeGif}>
  <View>
    { gifs.map(gif, index) => {
      let style = showIndex === index ? styles.show : styles.hide
      return (
        <Image
          source={gif.src}
          style={style} />
      )
    }
  </View>
</TouchableWithoutFeedback>

如果只有两个图像，这很有效。但是，如果我开始添加3个或更多性能下降。有没有更好的方法来预加载图像，在我的情况下是GIF？