Question

基本上，我正在进行API调用以获得某种响应。在此响应中，有一些字段如socialImageUrl指向引用图像的URL字符串。除了URL之外还有其他数据。我正在缓存整个回复。

所以我关闭了wifi和LTE，我通过在浏览器上做的事情来检查我没有互联网连接。我回到我的应用程序，然后触发我的LruCache并检索缓存的响应（我知道因为记录而得到它）并且我使用该响应来呈现我的页面。

我的期望：我会看到我在页面上缓存的所有数据但是使用图像URL的任何内容都会给出一些错误的图像，或者页面甚至可能都没有加载，因为存在一些错误使用该图片网址，因为它无法访问互联网

实际发生的事情：我看到我缓存的所有数据，我也看到了图像

了解发生了什么？据我所知，我没有做任何图像缓存。我正在使用react-native的vanilla Image JSX组件。我也在Android上。

Answer 1

我也遇到过这种情况，遗憾的是React-Native doc目前并不广泛。

图片组件的Android实现默认情况下为低尺寸＆lt;的图像启用了缓存500 KB （最大尺寸没有记录，但您可以尝试不同大小的图像进行检查，以后这个尺寸可能会发生变化）。

注意：即使在IOS中，使用Image组件时默认也会缓存图像。

Answer 2

如果我不得不猜测，lru缓存不支持缓存二进制数据，如图像文件。

如果您需要高级＆lt; Image＆gt;性能缓存或将远程映像永久存储到本地磁盘以供脱机应用程序使用，您可以使用我的高阶组件模块升级本机＆lt; Image＆gt;

React Native Image Cache HOC

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

第一个图像将被缓存，直到总局部缓存增长超过15 MB（默认情况下），然后缓存的图像将被删除最早，直到总缓存再次低于15 MB。

第二张图像将永久存储到本地磁盘。人们使用此功能替代您的应用程序发送静态图像文件，但您可以使用它，以便即使用户离线，您的应用程序也会显示图像内容。

如果您需要预先从网络中获取所有图像文件（在＆lt; CacheableImage＆gt;由react native呈现之前），则只需使用以下CacheableImage静态方法来预取文件：

import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
CacheableImage.cacheFile('https://i.redd.it/hhhim0kc5swz.jpg', true)
  .then( localFileInfo => {
    console.log(localFileInfo);

    // Console log outputs:
    //{
    //  url: 'https://i.redd.it/rc29s4bz61uz.png',
    //  cacheType: 'permanent',
    //  localFilePath: '/this/is/absolute/path/to/file.jpg'
    //}

  });

React Native LruCache：它是否缓存来自图片网址的图片

2 个答案: