Question

我正在尝试更多地了解React Native能够从互联网预取图像。我的总体目标是基本上制作幻灯片，但是当用不同的照片重新渲染时......你不会看到这种奇怪的白色闪光

我的一个问题是Image.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应该是正确的回调，因为它在安装之前被调用。如果你不通过道具传递预取的图像，构造函数也可以工作。如果你传递它们并最终更改它们，你可以将错误项目上的预取作为竞争条件。

从URL预取图像

1 个答案: