反应本机图像预取 [英] React native Image prefetch

问题描述

我在理解图像预取方面有困难.在 doc's 中没有太多解释:><块引用>

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

能否请您帮我了解以下有关图像预取的内容:

1. 假设用户上传了一张个人资料图片，并且该图片的 URL 存储在 AsyncStorage 中.

   • 我是否应该在成功上传后运行 Image.prefetch(UserStore.profileImageUrl) 仅一次.并在组件中使用预取图像通常像 <Imagesource={{uri: UserStore.profileImageUrl}}/>

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

2. 假设，稍后，用户通过上传新图片更改了他们的个人资料图片，上传成功后，我将预取新图片.之前缓存的图片还会存在磁盘上吗?

   • 如果是的话，如果有很多预取的图片，会不会占用设备很大的空间?
3. 有没有办法手动从磁盘中删除预取的图像?

考虑到上述问题，如果在使用 react native 和 expo 时有其他解决方案来实现图像缓存，请您帮我解决一下.

解决方案

这确实是我处理了一段时间的问题，我了解了一些关于 Image.prefetch 的事情:

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

• ios 实现仍然不完整.
• 没有关于它的完整指南.
• 无法清除缓存(您可以检查 url 是否已缓存，但据我所知您现在无法清除它).

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

目的

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

<块引用>

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

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

Image.prefetch(url) 实际上将图像保存到磁盘(不是内存)，因此，无论何时何地您尝试使用

<图片来源={{uri:url}}/>

首先它会检查缓存 url 列表，如果您之前预取过该 url(并且它位于磁盘上)，则不会费心重新获取(除非您运行函数 `Image.prefetch(url))' 再次(我不确定它是否工作正常).

这个问题的含义非常复杂.这意味着如果您在一个组件中预取图像(例如 )，当您尝试在另一个组件中显示此特定图像(例如 )，它不会获取图像，只会使用磁盘缓存.

<块引用>

因此，要么根本不要使用这个 Image.prefetch(直到有一个完整的 API，有缓存控制)或者使用它，风险自负.

• Android

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

1. 预取:

   var response = Image.prefetch(imageUrl,callbackFunction)

Image.prefetch 可以有一个可选的第二个参数 callbackFunction，它是一个运行 Before 获取图像的函数.它可以写成以下格式:

 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做更多的事情.

2. abortPrefetch

    Image.abortPrefetch(requestId) ;

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

3. 查询缓存

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

用于检查某个url是否已经被缓存，如果是，它缓存在哪里(磁盘或内存)

• 在 IOS 上

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

I am having difficulties to understand Image prefetch. In the doc's there is not much explanation about it:

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

Could you please help me understand the following about Image prefetch:

1. Suppose a user uploads a profile image, and the image's URL is stored in the AsyncStorage.

   • Should I run Image.prefetch(UserStore.profileImageUrl) only once after successful upload. And use prefetched image in the components normally like <Imagesource={{uri: UserStore.profileImageUrl}}/>

   • Or should I always run Image.prefetch(UserStore.profileImageUrl) before using that image in the component, then only run <Imagesource={{uri: UserStore.profileImageUrl}}/>

2. Suppose, later on, the user changes their profile image by uploading a new image and after successful upload, I will prefetch the new image. Will the previously cached image still exist on the disk?

   • If yes, won't it occupy a lot of space in the device if there are lots of prefetched images?
3. Is there any way to manually remove the prefetched image from the disk?

With the above questions in mind, if there are alternate solutions to achieve caching of images when using react native with expo, could you please help me with it.

解决方案

It was indeed a question that I was dealing with for a while, and I learned a few things about Image.prefetch:

In the current React-Native version (0.48), this method is still in progress. To be more precise:

• the ios implementation is still incomplete.
• There is no complete guide on it.
• There is no way to clear cache (you can check if the url is cached, however as far as I know you cannot clear it now).

As a result, I don't suggest you use it. Regardless, if you want to know how the API works, it is how:

Purpose

The purpose is quite obvious I think, this API:

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

It means that you can use Image.prefetch(url) in your constructor or componentWillMount. It tries to fetch image asynchronically, then, render your page with some kind of an ActivityIndicator, Finally, when the image is successfully fetched you can re-render your component.

Image.prefetch(url) actually saves the image to disk (not memory), as a result, whenever or wherever you try to use

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

At firsts it checks the list of caches urls, if you have prefetched that url before (and it is located on the disk), it won't bother to re-fetch (unless you run function `Image.prefetch(url)' again (I am not sure if it works properly).

The implications of this issue are so complicated. It means that if you prefetch an image inside one component (for example <Component1/>), when you try to show this specific image in another component (for example <Component12>), It won't fetch the image and just uses the disk cache.

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.

• on Android

On Android, you have 3 APIs for prefetch, and only one of them is presented in the documentation:

1. prefetch:

   var response = Image.prefetch(imageUrl,callbackFunction)
   

Image.prefetch can have an optional second argument callbackFunction, which a function that runs Before fetching image. It can be written in the following format:

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

It might be worthy to note that, callbackFunction can have an argument called requestId, (indicating the number of prefetch among all other prefetches) which can be then used to abort the fetch.

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

Moreover, response is a promise, you can use .then to do more after the image is pre-fetched.

2. abortPrefetch

    Image.abortPrefetch(requestId) ;
   

used to abort the pending prefetch. requestId used as argument is the same as the one seen in prefetch.

3. queryCache

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

Used to check if a certain url is already cached, and if so where is it cached (disk or memory)

• on IOS

I think that only Image.prefetch(url) is currently available on IOS, and there is no callback function to be called as the second argument.

这篇关于反应本机图像预取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！