如何在 Expo 中从本地预加载图像

Question

我正在做一个项目，但在加载背景图像时卡住了。

<Image
    source={Images.welcomeBg}
    style={styles.container}
  >
...
</Image>

但图像花费 1-2 秒来加载它，我正在按照此链接进行操作 ，它现在仍然无法工作。请帮我修复这个错误

Answer 1

你可以这样做

重新命名cachedAssetAsync.js（确保您可以选择您喜欢的任何名称）

import { Asset, Font } from 'expo';

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

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

function cacheVideos(videos) {
  return videos.map(video => Asset.fromModule(video).downloadAsync());
}

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

然后在 App.js 或您使用的任何根组件中，可以这样做

  async _loadAssetsAsync() {
    try {
      await cacheAssetsAsync({
        images: [require('./assets/images/exponent-icon.png')],
        fonts: [
          { 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf') },
          MaterialIcons.font,
        ],
        videos: [require('./assets/videos/ace.mp4')],
      });
    } catch (e) {
      console.log({ e });
    } finally {
      this.setState({ appIsReady: true });
    }
  }

您可以在显示加载屏幕时执行逻辑，然后在appIsReady显示实际屏幕时执行逻辑。当然，您只能在一个文件中执行此操作。falseappIsReadytrue

博览会文档：https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html