从URL预取图像

Question

我正在尝试更多地了解React Native从Internet预取图像的能力。我的总体目标是基本上构建幻灯片，但是当用不同的照片重新读取时。

我的问题之一是图像。Prefetch文档非常有限，我很难弄清楚它的工作原理

首先，我创建this.state.picarray并创建一个4个图片的数组

  picArray: ['https://snap-photos.s3.amazonaws.com/img-thumbs/960w/5ECBT47XF5.jpg',
                'https://snap-photos.s3.amazonaws.com/img-thumbs/960w/8N1P2AHD0W.jpg',
                'https://snap-photos.s3.amazonaws.com/img-thumbs/960w/SFJPODPJY4.jpg',
                'https://snap-photos.s3.amazonaws.com/img-thumbs/960w/5ECBT47XF5.jpg'
       ]

我尝试对我在componentdidmount中创建的数组中的每个图像进行预摘要

  componentDidMount() {
   var prefetchTask = Image.prefetch('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/5ECBT47XF5.jpg');
   var prefetchTask1 = Image.prefetch('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/8N1P2AHD0W.jpg');
   var prefetchTask2 = Image.prefetch('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/SFJPODPJY4.jpg');
   var prefetchTask4 = Image.prefetch('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/5ECBT47XF5.jpg');
  }

，然后我以这样的方式显示这样的图片，例如索引，当图片被划分时，并在数组中显示了下一张图片

<Image  source={{ uri: this.state.picArray[this.state.id] }}
                        style={styles.deck} />

这似乎很贴心，这有更快的加载时间，但我不确定这是预拿这些图像的正确方法吗？我的最终目标是在切换图片之间没有白色闪光。任何帮助都是非常感谢

Answer 1

componentwillmount应该是正确的回调，因为它在安装前就被称为。如果您不通过道具传递预取的图像，则构造函数也可能起作用。如果您通过它们并最终更改它们，则可以将错误的项目预取作为种族条件。