反应原生图像预取

Question

我很难理解Image prefetch.在文档中没有太多解释:

"通过将远程映像下载到磁盘缓存来预取远程映像以供以后使用"

你能帮我理解下面的图片预取:

假设用户上传了配置文件图像,并且图像的URL存储在AsyncStorage中.
- Image.prefetch(UserStore.profileImageUrl) 成功上传后我应该只运行一次.并且通常在组件中使用预取图像<Imagesource={{uri: UserStore.profileImageUrl}}/>
- 或者我应该Image.prefetch(UserStore.profileImageUrl)在组件中使用该图像之前始终运行,然后才运行<Imagesource={{uri: UserStore.profileImageUrl}}/>
假设,稍后,用户通过上传新图像来更改其个人资料图像,并且在成功上传之后,我将预取新图像.以前缓存的图像是否仍然存在于磁盘上？
- 如果是,如果有大量预取图像,它是否会占用设备中的大量空间？
有没有办法手动从磁盘中删除预取的图像？

考虑到上述问题,如果在使用本地反应世界时有替代解决方案来实现图像缓存,请你帮我解决一下.

Answer 1

这确实是我正在处理一段时间的问题,我学到了一些关于Image.prefetch:

在当前React-Native版本(0.48)中,此方法仍在进行中.更确切地说:

因此,我不建议您使用它.无论如何,如果你想知道API是如何工作的,那就是:

目的

我认为目的很明显,这个API:

通过将远程映像下载到磁盘高速缓存来预取远程映像以供以后使用

这意味着你可以Image.prefetch(url)在你的constructor或componentWillMount.它尝试异步获取图像,然后使用某种ActivityIndicator呈现页面.最后,当成功获取图像时,您可以重新呈现组件.

Image.prefetch(url) 实际上,无论何时何地尝试使用,都会将图像保存到磁盘(而不是内存)

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

在第一次它检查缓存URL的列表,如果你之前已经预取了这个url(并且它位于磁盘上),它将不会再费用(除非你再次运行函数`Image.prefetch(url)' (我不确定它是否正常工作).

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

因此,要么根本不使用此Image.prefetch(直到有完整的API,具有缓存控制)或使用它需要您自担风险.

在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是一个承诺,您可以使用.then在预取图像后做更多.

abortPrefetch
```
 Image.abortPrefetch(requestId) ;
```
Run Code Online (Sandbox Code Playgroud)

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

实现QueryCache

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

用于检查某个URL是否已被缓存,如果是,则缓存在哪里(磁盘或内存)

我认为Image.prefetch(url)目前只在IOS上可用,并且没有回调函数可以作为第二个参数调用.