这确实是我一直在处理的一个问题,并且我了解到了一些事情Image.prefetch
:
在当前React-Native
版本(0.48),此方法仍在进行中。更准确地说:
- ios 的实现仍然不完整。
- 没有关于它的完整指南。
- 无法清除缓存(您可以检查网址是否已缓存,但据我所知您现在无法清除它)。
因此,我不建议你使用它。无论如何,如果您想了解 API 是如何工作的,那就是:
Purpose
我认为这个 API 的目的很明显:
通过将远程图像下载到磁盘缓存来预取远程图像以供以后使用
这意味着您可以使用Image.prefetch(url)
在你的constructor
or 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
,这是一个运行的函数Before正在获取图像。可以写成如下格式:
var response = Image.prefetch(imageUrl,()=>console.log('Image is being fetched'))
可能值得注意的是,callbackFunction
可以有一个名为requestId
,(指示所有其他预取中预取的数量),然后可以使用它来中止提取。
var response = Image.prefetch(imageUrl,(id)=>console.log(id))
而且,response
是一个承诺,你可以使用.then
预取图像后执行更多操作。
-
中止预取
Image.abortPrefetch(requestId) ;
用于中止挂起的预取。用作参数的 requestId 与预取中看到的相同。
-
查询缓存
Image.queryCache([url1,url2, ...])
.then((data)=>console.log(data));
用于检查某个url是否已经被缓存,如果是则缓存在哪里(磁盘或内存)
我认为只有Image.prefetch(url)
目前在IOS上可用,并且没有可以作为第二个参数调用的回调函数。