react-native - react 本地镜像预取

Question

我很难理解Image prefetch。在doc's中，对此没有太多解释:

"Prefetches a remote image for later use by downloading it to the disk cache"

您能否帮助我了解有关图像预取的以下信息:

假设用户上载了个人资料图片，并且该图片的URL存储在AsyncStorage中。

成功上传后，我应该只运行一次Image.prefetch(UserStore.profileImageUrl) 吗。并在通常像<Imagesource={{uri: UserStore.profileImageUrl}}/>

这样的组件中使用预取的图像

或者我应该始终在组件中使用该图像之前运行Image.prefetch(UserStore.profileImageUrl)，然后仅运行<Imagesource={{uri: UserStore.profileImageUrl}}/>

假设稍后用户通过上传新图像来更改其个人资料图像，成功上传后，我将预取新图像。磁盘上是否仍然存在以前缓存的镜像？

如果是，如果有很多预取的图像，它是否会在设备中占用很多空间？

有什么方法可以从磁盘上手动删除预取的图像吗？

考虑到以上问题，如果在使用expo native时使用替代解决方案来实现图像缓存，请您帮我一下。

Answer 1

我确实已经解决了一段时间这个问题，并且我了解了有关Image.prefetch的一些知识:

在当前的React-Native版本(0.48)中，此方法仍在进行中。更准确地说:

ios的实现仍未完成。

尚无完整指南。

无法清除缓存(您可以检查网址是否已缓存，但是据我所知，您现在无法清除它)。

因此，我不建议您使用它。无论如何，如果您想知道API的工作原理，那就是:

目的

我认为此API的目的非常明显:

Prefetches a remote image for later use by downloading it to the disk cache

这意味着您可以在Image.prefetch(url)或constructor中使用componentWillMount。它尝试异步获取图像，然后使用某种ActivityIndi​​cator呈现页面，最后，成功获取图像后，您可以重新呈现组件。
Image.prefetch(url)实际上将图像保存到磁盘(而不是内存)中，因此无论何时何地您都可以使用

<Image source={{uri:url}}/>

首先，它会检查缓存URL的列表，如果您之前已预取了该URL(并且它位于磁盘上)，它就不会为重新获取而烦恼(除非再次运行函数`Image.prefetch(url)')。 (我不确定它是否正常工作)。

这个问题的含义是如此复杂。这意味着，如果您在一个组件(例如<Component1/>)中预取一个图像，则当您尝试在另一个组件(例如<Component12>)中显示此特定图像时，它将不会获取该图像，而仅使用磁盘缓存。

Therefore, either don't use this Image.prefetch at all (until there is a complete API, with cache control) or use it at your own risk.

android上的

在Android上，您有3个用于预取的API，文档中仅介绍了其中一个:

预取:

var response = Image.prefetch(imageUrl,callbackFunction)

Image.prefetch可以有一个可选的第二个参数callbackFunction，该函数在提取图像之前运行 。可以用以下格式编写:

    var response = Image.prefetch(imageUrl,()=>console.log('Image is being fetched'))

可能值得注意的是，callbackFunction可以有一个称为requestId的参数(指示所有其他预取中的预取次数)，然后可以使用该参数来中止取回。

    var response = Image.prefetch(imageUrl,(id)=>console.log(id))

此外，response是一个 promise ，可以在预取图像后使用.then进行更多操作。

abortPrefetch

 Image.abortPrefetch(requestId) ;

用于中止挂起的预取。用作参数的requestId与在预取中看到的相同。

queryCache

  Image.queryCache([url1,url2, ...])
    .then((data)=>console.log(data));

用于检查某个URL是否已经被缓存，以及是否被缓存在哪里(磁盘或内存)

IOS上的

我认为IOS当前只有Image.prefetch(url)可用，并且没有回调函数可以作为第二个参数来调用。