在React Native中缓存图像

Question

有没有一个好的库或者一些默认的React Native组件可以缓存来自URL的图像？ 我已经尝试了react-native-cache-image，但是它与react-native-fs和react-native-sqlite-storage存在许多问题，由于我是React Native的新手，我不知道如何正确修复它们。

- Adrian Zghibarta

---

你是否尝试存储缓存图像？ - Viral Patel

Answer 1

使用yarn添加react-native-fast-image依赖包

参考：https://github.com/DylanVann/react-native-fast-image

import FastImage from 'react-native-fast-image'


<FastImage
    style={{ width: 200, height: 200 }}
    source={{ uri: 'https://unsplash.it/400/400?image=1' }}
    resizeMode={FastImage.resizeMode.stretch}

/>

- Israt Jahan Simu

---

谢谢，看起来不错。可能只有我关心从服务器发送的头信息。 - FDisk

Answer 2

您可能对我的高阶组件模块感兴趣，该模块为原生的<Image>组件添加了性能相关的图像缓存和“永久缓存”功能。我的模块依赖于react-native-fetch-blob，这是一个备受尊重和经过测试的文件下载库，因此您不应该遇到依赖问题。

React Native Image Cache HOC

简短代码示例：

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。

第二个图像将永久存储在本地磁盘上。人们使用它作为静态图像文件的替代品，与您的应用程序一起发布。

另外，您似乎有兴趣任意地将图像文件存储到本地磁盘上。您可以使用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'
    //}

  });

希望这可以帮到您！

- billmalarky

---

在受保护的路由中，我可以同时使用JWT头令牌进行身份验证吗？ - Shubham1164

Answer 3

直接从Expo文档中提取的内容：

import React from 'react';
import Expo from 'expo';
import { Image, View } from 'react-native';
import logo from './assets/icon.png';

const cacheImages = images => images.map(image => {
  if (typeof image === 'string') return Image.prefetch(image);
  return Expo.Asset.fromModule(image).downloadAsync();
});

class View extends React.component {
  state = {
    appIsReady: false
  }

  componentWillMount() {
    this.loadAssetsAsync();
  }

  async loadAssetsAsync = () => {
    const imageAssets = cacheImages([icon]);
    await Promise.all([...imageAssets]);
    this.setState({ appIsReady: true });
  }

  render() {
    return(
      <View>
        <Image source={logo} style={styles.imageStyle} />
      </View>
    );
  }
}

我认为这段代码很简单。当所有图片加载完毕时，您将拥有一个状态将设置为true。您将拥有处理工作的cacheImages函数。您唯一需要的要求是Expo。

- Abraham

Answer 4

我已经使用了这个库并且在安卓和iOS手机上都能运行。它可以在EXPO和ReactNative中工作。在React Native中，自动存储捕获的图像。

安装该库的方法如下：

yarn add picache

然后在您的js文件中使用它，首先导入该文件并使用它。欲了解更多信息，请点击。

import Picache from "picache";

const App = () => (
     <Picache
        style={{ height: 150, width: 350 }}
        source={require("./square.png")}
      />
);

- Viral Patel

Answer 5

Image组件内置了prefetch()方法。

- Radek Czemerys

---

Radek Czemerys，谢谢，这是一个不错的起点，但我实际上需要将它们保存到本地存储（或其他替代方案）并带有ID，在需要时提取它们。 - Adrian Zghibarta