React Native LruCache：它是否缓存来自图像 url 的图像

Question

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

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

我的预期：我会看到我缓存在页面上的所有数据，但任何使用图像 URLs 的东西都会给出一些错误的图像，或者页面甚至根本无法加载因为该图像存在一些错误 URL 无法访问互联网

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

有什么线索吗？据我所知，我没有做任何图像缓存。我正在使用 react-native 的 vanilla Image JSX 组件。我也在 Android.

Answer 1

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

The Android implementation of Image component has by default caching enabled for images of low size < 500 KB (the max size is not documented but you can just try images of varied size to check and this size could change in the future).

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

Answer 2

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

如果您需要高级性能缓存或将远程图像永久存储到本地磁盘以供离线应用程序使用，您可以使用我的升级原生的高阶组件模块

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。

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

如果你需要预先从网络中抓取所有图像文件（在被 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：它是否缓存来自图像 url 的图像

React Native LruCache: Does it cache images from image urls

android

caching

react-native

react-native-android