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

Question

我需要从url下载图像并将其缓存到应用程序的缓存目录中。我正在 react native 平台上开发应用程序。据我所知，我在 IOS 上工作的队友有一个允许缓存图像的 Prop ，但 Android 上尚不支持该 Prop 。我需要一种为 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

Note: You must be using React Native 0.60.0 or higher to use the most recent version of 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}
    />
)