Question

是否有一个好的库或者某些默认的反应本机组件可以从网址缓存图像？我已经尝试了react-native-cache-image，但是react-native-fs和react-native-sqlite-storage存在很多问题，因为我是新手来回应原生我不知道如何正确修复它们。

Answer 1

您可能对我的高阶组件模块感兴趣，该模块将与性能相关的图像缓存和“永久缓存”功能添加到本机＆lt; Image＆gt;零件。我的模块依赖于react-native-fetch-blob，这是用于下载文件的goto备受尊重且经过实战考验的库，所以你不应该有依赖性问题。

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。

第二张图像将永久存储到本地磁盘。人们使用此功能替代您的应用程序运送静态图像文件。

听起来您还有兴趣将图像文件随意存储到本地磁盘。您可以使用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'
    //}

  });

希望这有帮助！

Answer 2

添加纱线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}

/>

Answer 3

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

Answer 4

直接来自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。

Answer 5

我使用了这个库，并且可以在android和ios手机中使用。它可以在 EXPO 和 ReactNative 中使用。在react native中自动存储的捕获图像。

对于安装库：

纱线添加Picache

然后像这样在您的js文件中使用，首先导入该文件并使用它。有关更多信息，click

import Picache from "picache";

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

缓存图像反应原生

5 个答案: