如何从本地预装图像与世博会做出反应

Question

我正在做一个项目但是我在加载背景图片时遇到困难。

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

但是Image需要1-2秒来加载它 我正在按照这个link 它现在仍然无法正常工作。 Plz帮我解决了这个bug

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 false显示加载屏幕，然后当appIsReady true显示实际屏幕时，您可以执行逻辑。确保你只能在一个文件中执行此操作。

expo doc：https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html