如何从 URL 下载图像并缓存 Android (React-Native)

Posted 2023-03-10

【中文标题】如何从 URL 下载图像并缓存 Android (React-Native)

【英文标题】：How to download images from URL and cache the for Android (React-Native)

【发布时间】：2020-03-03 02:07:04

【问题描述】：

我需要从 url 下载一个图像并将其缓存到应用程序的缓存目录中。我正在 react-native 平台上开发应用程序。据我所知，我在 ios 上工作的队友有一个允许缓存图像的道具，而 android 尚不支持此道具。我需要一种为 Android 缓存图像的好方法。

react-native 的版本：0.60.5

我尝试过使用 rn-fetch-blob 库。我设法将图像存储在缓存中，但是，当我使用路径时

RNFetchBlob
  .config(
    fileCache : true,
    appendExt : 'jpg'
  )
  .fetch('GET', 'some url from firebase storage', 
  )
  .then((res) => 
     this.setState( imagePAth: res.path() )
  )

<Image
  style= width: 200, height: 200, resizeMode: "contain" 
  source= uri: "file://" + this.state.imagePath 
/>

它不渲染图像。

我的其他队友说 react-native-fs 库坏了，它不起作用。所以我信任他们，但如果有人设法使用 react-native-fs 做到这一点，请告诉我。

我也尝试使用 react-native-cached-image，但它总是给我和错误

undefined is not an object Netinfo.isconnected

最新版本的 react-native-cached-image 需要 react-native-community 提供的 netinfo 库。顺便说一句，我已连接到互联网。我正在使用库中的代码示例进行测试。

如果需要参考我使用的库：https://github.com/fungilation/react-native-cached-image

我非常感谢任何帮助。谢谢！

【问题讨论】：

您是否尝试过使用react-native-fast-image，它非常适合处理缓存图像。它使管理图像和缓存比自己更容易。

@Andrew，感谢您的回复。我发现这个库是 react-native-image-cache-hoc。它适用于 IOS 和 Android。

我发布了一个关于文件系统上的图像缓存的新包：github.com/georstat/react-native-image-cache 它在后台使用react-native-file-access，女巫得到了很好的维护，而不是react-native-fetch-blob

【参考方案1】：

你可以试试react-native-fast-image

yarn add react-native-fast-image or npm install --save react-native-fast-image

注意：您必须使用 React Native 0.60.0 或更高版本才能使用最多 react-native-fast-image 的最新版本。

示例

import FastImage from 'react-native-fast-image'

const YourImage = () => (
    <FastImage
        style= width: 200, height: 200 
        source=
            uri: 'https://unsplash.it/400/400?image=1',
            headers:  Authorization: 'someAuthToken' ,
            priority: FastImage.priority.normal,
        
        resizeMode=FastImage.resizeMode.contain
    />
)

【参考方案2】：

感谢您的回复。我找到了另一个适用于 IOS 和 Android 的库。 react-native-image-cache-hoc。至少它在react-native: 0.60.5 上运行良好。我没有尝试react-native-fast-image，但如果人们说它有效，那么它应该是。

请参考：https://github.com/billmalarky/react-native-image-cache-hoc 如果你对图书馆感兴趣。

【讨论】：

当我尝试使用 react-native-image-cache-hoc 时收到 [TypeError: Network request failed]。你以前遇到过这种情况吗？

我很抱歉回复晚了，我有一段时间没来了。过了一段时间，这个包不再为我工作了，我设置了react-native-fast-image