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

Question

我需要从 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

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

Answer 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}
    />
)

Answer 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 如果你对图书馆感兴趣。