Image.prefetch не кэширует изображения из Firebase [React Native / Expo] - PullRequest
Новая
       48

Image.prefetch не кэширует изображения из Firebase [React Native / Expo]

0 голосов
/ 23 октября 2019

Я разрабатываю экран в виде галереи, который позволяет пользователям просматривать / управлять изображениями и, похоже, не может найти надежный способ кэширования этих мультимедийных ресурсов, что приводит к медленному времени загрузки.

Это мойпростая однострочная функция cacheImages: 

import { Image } from 'react-native';

export const cacheImages = async (urls: string[]) => Promise.all(urls.map(Image.prefetch));

И я вызываю ее после выборки пользовательских носителей в mobx MediaStore.ts: 

          const urls = media
            .filter(({ type }) => type === 'image')
            .map(({ downloadURL }) => downloadURL.split('&token')[0]);

          await cacheImages(urls);
          const cache = await Image.queryCache(urls);
          console.log(cache); // outputs {}

Поднимаясь по стеку, вызывается метод, содержащий приведенный выше кодиз AuthCheck.tsx (пример из документов по реактивной навигации) вот так: 

  async componentDidMount() {
    firebase.auth().onAuthStateChanged(async (user: any) => {
      const { navigate } = this.props.navigation;
      if (user) {
        store.userStore.user = new User(user);
        await store.userStore.mediaStore.subscribeToMedia();
        navigate('Media');
      } else {
        navigate('Auth');
      }
    });
  }

В конце концов, если я поставлю: 

<Image source={{ uri: downloadURL, cache: 'only-if-cached' }} style={{ width: '100%', height: '100%' }} />

нет изображенийпоказать (что ожидается, поскольку Image.queryCache выводит пустой объект)

Кроме того, все URL-адреса для загрузки работают, и я жду Promise.all, возвращенный из chacheImages, и жду этого в AuthCheck.tsx, поэтому я считаю, что эта проблемане из-за размонтирования компонента или неправильных URL-адресов. Спасибо!

...