在渲染react native之前获取多个图像源

import { Image } from 'react-native';
import { Promise } from 'bluebird';

const getMultipleImageSources = async (imageUrls) => {
  try {
    // 使用Promise.all方法并发获取多个图像源
    const imagePromises = imageUrls.map((url) => {
      return new Promise((resolve, reject) => {
        Image.prefetch(url)
          .then(() => {
            resolve({ uri: url });
          })
          .catch((error) => {
            reject(error);
          });
      });
    });

    // 等待所有图像源都被获取完成
    const images = await Promise.all(imagePromises);

    // 返回获取到的图像源数组
    return images;
  } catch (error) {
    console.error('Error fetching image sources:', error);
    throw error;
  }
};

const imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
];

const images = await getMultipleImageSources(imageUrls);

// 在React Native组件中使用获取到的图像源数组进行渲染
return (
  <View>
    {images.map((image, index) => (
      <Image key={index} source={image} style={styles.image} />
    ))}
  </View>
);