Question

我很难理解Image prefetch。在doc's中没有太多解释：

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

请您帮我理解以下关于图像预取的内容：

假设用户上传了个人资料图片，并且该图片的网址存储在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）中，此方法仍在进行中。更确切地说：

ios实施仍然不完整。
没有完整的指南。
无法清除缓存（您可以检查网址是否已缓存，但据我所知，您现在无法清除它。）

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

目的

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

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

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

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

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

第一次检查缓存网址列表，如果你之前已经预取了这个网址（并且它位于磁盘上），那么它就不用再重新获取了（除非你运行函数`Image.prefetch （url）＆＃39;再次（我不确定它是否正常工作）。

这个问题的含义是如此复杂。这意味着如果您在一个组件内预取图像（例如<Component1/>），当您尝试在另一个组件中显示此特定图像时（例如<Component12>），它将无法获取图像，只使用磁盘缓存。

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

在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是一个承诺，您可以使用.then在预取图像后执行更多操作。

abortPrefetch
```
 Image.abortPrefetch(requestId) ;
```

用于中止待处理的预取。用作参数的requestId与prefetch中显示的相同。

实现QueryCache

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

用于检查某个网址是否已被缓存，如果是，则缓存（磁盘或内存）

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

Answer 2

如果有替代解决方案来实现图像缓存使用本地反应世界，你能不能帮助我。

您可能对我的高阶组件模块感兴趣，该模块添加了与性能相关的图像缓存和＆＃34;永久缓存＆＃34;本机＆lt; Image＆gt;的功能成分

React Native Image Cache HOC

Tl; DR代码示例：

import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
      </View>
  );
  }
}

第一个图像将被缓存，直到总局部缓存增长超过15 MB（默认情况下），然后缓存的图像将被删除最早，直到总缓存再次低于15 MB。

第二张图像将永久存储到本地磁盘。人们使用此功能替代您的应用程序运送静态图像文件。

就个人而言，当文件发生变化时，我不会通过一遍又一遍地写文件来复杂化，这只会让人头疼。相反，我会为每次上传创建一个唯一的文件名。因此，用户首次上传时的个人资料照片是＆＃34; profile-uniqueIdHere.jpg＆＃34;当他们改变他们的个人资料时，你只需创建一个新文件＆＃34; profile-anotherUniqueIdHere.jpg＆＃34;并更新其用户数据以反映新文件位置。有关创建唯一ID的帮助，请查看react-native-uuid。

React native image prefetch

2 个答案: