Question

Expo有一个名为Assets的模块，可用于缓存图像和字体（不是来自网络）。自从我将自己的项目从世博会中淘汰出局以来，我想知道如果不使用世博会就能实现同样的目标（香草反应原生）。

这是他们文档的链接：https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html

这是我弹出项目之前的代码：

import { Asset, Font } from 'expo'

export default function cacheAssetsAsync ({
  images = [],
  fonts = []
}) {
  return Promise.all([
    ...cacheImages(images),
    ...cacheFonts(fonts)
  ])
}

function cacheImages (images) {
  return images.map(image => Asset.fromModule(image).downloadAsync())
}

function cacheFonts (fonts) {
  return fonts.map(font => Font.loadAsync(font))
}

Answer 1

您可能对我的高阶组件模块感兴趣，该模块将与性能相关的图像缓存和“永久缓存”功能添加到本机＆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。

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

这应该开箱即用。希望它有所帮助！

Answer 2

对于外部图像，您可以使用图像模块的prefetch方法。

示例

import { Image } from 'react-native'; Image.prefetch('https://some.path.image');

Answer 3

我使用react-native-fast-image进行图像缓存（本地和远程）。直接来自文档：

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

const YourImage = () =>
  <FastImage
    style={styles.image}
    source={{
      uri: 'https://unsplash.it/400/400?image=1',
      headers:{ Authorization: 'someAuthToken' },
      priority: FastImage.priority.normal,
    }}
    resizeMode={FastImage.resizeMode.contain}
  />

缓存图片资源

3 个答案: