PreFetch镜像原生反应

Question

我有一个组件，其中的背景每5秒改变一次。我实现的方式是在加载图像之间有一个很小的延迟。我正在寻找一种方法来预取组件挂载时的图像，而不是当URL状态改变时。

componentDidMount(){
    setInterval(() => {
        let nextStorie = this.state.currentStory + 1
        this.setState({ url: this.state.listOfUrls[nextStorie].url, currentStory: nextStorie })
    }, 15000)
}
return (
    <ImageBackground source={{ uri: this.state.url }}>
        <Content />
    </ImageBackground>
)

Answer 1

您可能可以使用react-native-preload-images预先加载您的图像列表

使用方法如下所示：

import { preloadImages, PreloadedImage } from 'react-native-preload-images'

[...]

componentDidMount(){
  const images = [
    {name: 'pic1.png', uri: 'https://mypics.com/pic1.png'},
    {name: 'pic2.png', uri: 'https://mypics.com/pic2.png'}    
   ];

   preloadImages(images);
}

[...]