React native 反应本机映像预取

我很难理解

图像预取

。在报告中，没有太多的解释：

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

请您帮助我了解以下有关图像预取的信息：

假设用户上载了一个配置文件映像，并且映像的URL存储在异步存储器中

• 我是否应该在成功上传后仅运行一次

  Image.prefetch（UserStore.profileImageUrl）

  。并在组件中使用预取图像，如

• 或者在组件中使用图像之前，我应该始终运行

  Image.prefetch（UserStore.profileImageUrl）

  ，然后只运行

假设稍后，用户通过上传一个新图像来更改他们的配置文件图像，成功上传后，我将预取新图像。以前缓存的映像是否仍存在于磁盘上

• 如果是，如果有很多预取图像，它是否会占用设备中的大量空间

有没有办法从磁盘上手动删除预取的映像

---

考虑到上述问题，如果在使用react native With expo时有其他解决方案可以实现图像缓存，请您帮助我

这确实是一个我处理了一段时间的问题，我学到了一些关于

图像的知识。预回迁

：

在当前的

React Native

版本（0.48）中，此方法仍在进行中。更准确地说：

• ios的实现仍然不完整
• 这方面没有完整的指南
• 没有办法清除缓存（您可以检查url是否已缓存，但据我所知，您现在无法清除它）

因此，我不建议你使用它。不管怎样，如果您想知道API是如何工作的，那么它是如何工作的：

目的

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

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

这意味着您可以在

构造函数中使用
Image.prefetch（url）
，或者
组件将挂载。它尝试异步获取图像，然后使用某种ActivityIndicator呈现页面，最后，当成功获取图像时，可以重新呈现组件

Image.prefetch（url）
实际上是将映像保存到磁盘（而不是内存），因此，无论何时何地，您都可以尝试使用它

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


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

中止预蚀刻

 Image.abortPrefetch(requestId) ;


用于中止挂起的预取。用作参数的requestId与在预回迁中看到的相同

槲皮草

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


用于检查某个url是否已缓存，如果已缓存，则在何处缓存（磁盘或内存）


在IOS上

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

如果有其他解决方案可以在以下情况下实现图像缓存：
使用react native with expo，你能帮我一下吗

您可能对我的高阶组件模块感兴趣，它向本机组件添加了与性能相关的映像缓存和“永久缓存”功能


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>
  );
  }
}

从“react native image cache hoc”导入imageCacheHoc；
const CacheableImage=imageCacheHoc（图像）；
导出默认类应用程序扩展组件{
render（）{
返回(
欢迎来到这里！
);
}
}

将缓存第一个映像，直到总本地缓存增长超过15 MB（默认情况下），然后首先删除缓存映像，直到总缓存再次低于15 MB

第二个映像将永久存储到本地磁盘。人们使用它作为随应用程序发送静态图像文件的替代品

就我个人而言，当文件发生变化时，我不会一遍又一遍地写文件，这样做会使事情变得过于复杂，这只会让人头疼。相反，我会为每次上传创建一个唯一的文件名。因此，用户第一次上传的个人资料图片是“profile uniqueIdHere.jpg”，当他们更改个人资料图片时，您只需创建一个新文件“profile anotherUniqueIdHere.jpg”，并更新其用户数据以反映新文件的位置。有关创建唯一ID的帮助，请查看。
用于图像预取的文档非常不透明，其行为有点难以理解。在缓存图像的生命周期中，您没有获得很多控制权。例如，不能手动强制清除缓存。我发现这令人沮丧，并最终在我参与的几个项目中使用了优秀的react原生映像缓存项目，并取得了良好的效果。请注意，如果您使用类似Expo的东西（它需要本机扩展），此项目将不适用于您。我本想链接到引用的项目：@ikrtolica遗憾的是，我将Expo用于我的应用程序。谢谢你的建议。谢谢你的解释。在与expo一起使用时，您能推荐任何好的图像缓存吗？如果您想保存图像并使其始终脱机可用，请查看。您知道此系统是否有任何更新？比如如何从缓存中删除？看起来不错，但这取决于
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>
  );
  }
}