前端之家

  1. 首页
  2. 问答

如何从URL下载图像并缓存Android版（React-Native）

• 问答

我需要从url下载图像并将其缓存到应用程序的缓存目录中。我正在开发本机平台上的应用程序。我在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

非常感谢您的帮助。谢谢！

toby_liao 回答：如何从URL下载图像并缓存Android版（React-Native）

您可以尝试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}
    />
)
,

感谢您的答复。我找到了另一个可以在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-nativereact-native-android
本文链接：https://www.f2er.com/3151251.html

大家都在问