Question

我试图了解如何缓存Image url，以便不需要重新加载。我看过：https://docs.expo.io/versions/v19.0.0/guides/preloading-and-caching-assets.html 并且一直在使用Image.prefetch：

const prefetchedImages = images.map(url => {
  console.log('url', url) //this is correctly logging the url
  return Image.prefetch(url)
});

Promise.all(prefetchedImages)
    .then(() => {
        this.setState({loaded:true})
})

这最终确实将状态设置为真。然后我在另一个组件中渲染我的图像，但我确保预取的组件不会卸载。我像这样加载网址：

<Image source={{uri: myImageUrl}} style={{width:100, height:100}} />

当我将图像加载到网格视图中时，只会立即显示本地图像，并且在渲染之前，具有URL的图像会呈现白色。在iOS上使用缓存：'force-cache'时，图像实际上是从缓存加载的，并且没有延迟。如果我使用预取，我想我不需要这样做。

我在这里遗漏了什么吗？我以为我可以像往常一样调用我的Image源，系统将知道如何获取该URL的缓存图像。

Answer 1

我认为预取并不像从缓存加载图像那么简单，因为它在缓存中，如果这是有意义的。

查看此主题https://github.com/facebook/react-native/issues/2314和此问题React native Image prefetch。

如果您想保存图片并让它们始终可以脱机使用，请查看https://www.npmjs.com/package/react-native-preload-images。

Image.prefetch不会自动从缓存加载[React-Native / Expo]

1 个答案: