反应天然图像预取

我很难理解 Image prefetch。在文档中，对此没有太多解释：

"预取远程图像以供以后下载到磁盘缓存"

您能帮我了解以下图像预取的以下内容：

假设用户上传了配置文件映像，并且图像的URL存储在异步。
- 成功上传后，我应该只运行Image.prefetch(UserStore.profileImageUrl) 一次。并在通常的组件中使用预取的图像，例如<Imagesource={{uri: UserStore.profileImageUrl}}/>
- 或在组件中使用该图像之前，我应该始终运行Image.prefetch(UserStore.profileImageUrl)，然后仅运行<Imagesource={{uri: UserStore.profileImageUrl}}/>
假设，以后，用户通过上传新映像来更改其配置文件图像，成功上传后，我将预拿新图像。先前缓存的图像是否仍然存在于磁盘上？
- 如果是的，如果有很多预取图像，它不会在设备中占用很多空间吗？
有什么方法可以手动从磁盘中删除预取的图像？

考虑到上述问题，如果有其他解决方案可以在使用Event Antive与Expo时实现图像的替代解决方案，请您帮助我。

这确实是我处理过一段时间的问题，我学到了一些有关 Image.prefetch的知识：

在当前React-Native版本（0.48）中，此方法仍在进行中。更准确：

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

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

目的

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

预取远程映像以供以后下载到磁盘缓存
。

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

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

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

首先，它检查了caches URL的列表，如果您在此之前预取URL（并且位于磁盘上），则不会费心重新fet（除非您运行函数`image.prefetch（url url））'再次（我不确定它是否正常工作）。

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

因此，要么不使用此image.prefetch（直到有一个完整的API，带有缓存控制），也可以自行使用它。

在Android上

在Android上，您有3个API用于预取，并且文档中只有一个API：

预取：

var response = Image.prefetch(imageUrl,callbackFunction)

Image.prefetch可以具有可选的第二个参数 callbackFunction，该函数在 fetching image之前运行。它可以以以下格式编写：

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

可能值得注意的是， callbackFunction可以具有称为 requestId的参数（指示所有其他预摘要中的预取数），然后可以用来中止fetch。

。

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

此外，response是一个承诺，您可以使用.then在预先绘制图像后进行更多操作。

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

用于中止待处理的预取。用作参数的requestID与预摘要中看到的参数相同。

querycache

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

用于检查某个URL是否已经缓存，如果是的，则在哪里缓存（磁盘或内存）

在ios

我认为当前仅在iOS上可用Image.prefetch(url)，并且没有回调函数被称为第二个参数。

如果有其他解决方案可以实现图像的缓存使用eact with with expo，您能帮我吗？

您可能对我的高阶组件模块感兴趣，该模块将与性能相关的图像缓存和"永久缓存"功能添加到本机＆lt; image＆gt;组件。

反应本机图像缓存HOC

tl; Dr Code示例：

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。

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

就我个人而言，我不会通过一遍又一遍地编写文件来更改文件来使事情变得过于复杂，这只是要求大量头痛。相反，我将为每个上传创建一个唯一的文件名。因此，用户的个人资料PIC首次上传是" profile-uniqueidhere.jpg"，当他们更改个人资料图片时，您只需创建一个新的文件" profile-anotheruniqueidhere.jpg"，然后更新其用户数据以反映新的文件位置。为了帮助创建独特的ID，请查看React-Native-uuid。

相关内容

最新更新

热门标签：