React Native Expo 预加载和缓存图像

Question

我是 react-native 的新手，我试图在应用程序开始时预加载 10 张图片，我遵循了世博会文档，但是

我想缓存来自外部文件的图像，但它给了我一个错误 [Un Handeled Promise Rejection]

这是我的 entry.js

export const ENTRIES1 = [
    {
        title: 'Makeup Artists',
        illustration: require('../assets/img/makeup.png')
    },
    {
        title: 'Photographers',
        illustration: require('../assets/img/Photographers.png')
    },
    {
        title: 'Wedding Planners',
        illustration: require('../assets/img/weddingPlanner.jpg')
    },
    {
        title: 'Wedding Halls',
        illustration: require('../assets/img/wedding-Hall.png')
    },
    {
        title: 'Laser & Beauty Centers',
        illustration: require('../assets/img/laser.png')
    },
]

loadingScreen.js

      async componentDidMount() { //Preload Fonts
    await Asset.loadAsync(ENTRIES1.illustration),
    await Font.loadAsync({
        'Roboto': require('../../node_modules/native-base/Fonts/Roboto.ttf'),
        'Roboto_medium': require('../../node_modules/native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.checkIfLoggedIn();
  }

我做错了什么？谢谢

Answer 1

试试这个:)

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

 async componentDidMount() { 


    await Asset.cacheImages(ENTRIES1),
    await Font.loadAsync({
        'Roboto': require('../../node_modules/native-base/Fonts/Roboto.ttf'),
        'Roboto_medium': require('../../node_modules/native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.checkIfLoggedIn();
  }