在渲染React Native之前获取所有图像

Question

我正在使用React Native（EXPO），Firebase和Redux 我正在在Firestore中的车辆集合下获取一些文档，每个车辆文档都包含指向存储车辆图像的Firebase存储器的URL。 我遇到的问题是下载所有车辆的所有图像，而获取所有车辆需要花费很长时间（例如30秒），而仅获取数据而不下载将花费5秒钟。

我尝试了不同的方法来查看是否可以使用redux来获取图像并将其传递到数组中，但是由于它不断消失并重新出现，它似乎并没有达到尽可能高的效率。

下面是我获取

的示例代码

 onFetchImages = async () => {
   const { vehicleList, } = this.props;
   const newList = vehicleList;
   const checkList = newList.length > 0;

   if (checkList) {
    const data = newList.map(async(item) => {
      const { vehiclePhotoUrl, docId, profilePicture, status } = item;

      if (!profilePicture && status === 'Verified') {
        await FileSystem.downloadAsync(
          vehiclePhotoUrl,
          `${FileSystem.documentDirectory}${docId}.jpg`,
        ).then((({ uri }) => {
          if (uri) {
            const newItem = item;
            newItem.profilePicture = uri;
            const list = [...vehicleList, newItem];
            const filterData = _.uniqBy(list, 'docId');
            this.props.getVehicleList(filterData);
          }
        }));
      }
    });
  }
 }