Загрузка изображений перед рендерингом ()

Question

Я использую RNFetchBlob для загрузки изображений, видео, логотипов и PDF-файлов.Если видео присутствует, я использую видео, если видео отсутствует, но фон есть, я использую фон.

Пока мое приложение находится в моем Configuring.js , оно асинхронно загружает все ресурсы и настраивает мое приложение.

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

let dirs = RNFetchBlob.fs.dirs;
RNFetchBlob.fs.ls(dirs.DocumentDir)
        .then( (files) => {
          for(var i = 0; i < files.length; i++) {
            let fileName = files[i].split('.');

            if(fileName[0] === 'background') {
              window.local_background = dirs.DocumentDir + '/' + files[i];
              continue;
            }

            if(fileName[0] === 'video') {
              window.local_video = dirs.DocumentDir + '/' + files[i];
              continue;
            }

            if(fileName[0] === 'logo') {
              window.local_logo = dirs.DocumentDir + '/' + files[i];
              continue;
            }
          }

          this.props.navigation.replace('Main');
        })

Когда я перемещаюсь между экранами, используя реагировать-навигацию , я использую общий компонент <Image/>, где источникустановите на source={{uri: window.local_background}}, но моя проблема в том, что при навигации по экранам я вижу белую вспышку при переходе на новый экран, которого еще нет в стеке.Как я могу ускорить это / предварительно загрузить его, чтобы он не начинал загружаться после того, как весь другой контент уже отрисован?

Есть ли лучший способ использовать глобальный фон в приложении?

Мой фон ДОЛЖЕН исходить с сервера и не может храниться локально в рамках сборки приложения.

Answer 1

Кэширование изображений в React Native не так велико, как могло бы быть.После долгих поисков я обнаружил, что использование react-native-fast-image отлично подходит для кэширования изображений и отображения изображений, загруженных из Интернета.Вы можете найти репо здесь .

Его очень просто использовать, в основном он заменяет компонент Image, предоставляемый react-native.

Настройка довольно проста (обратите внимание, что этот пакет недоступен на Expo)

Вы можете установить его следующим образом

# Install
yarn add react-native-fast-image
npm install react-native-fast-image

# Automatic linking. (other linking methods listed on their website)
react-native link react-native-fast-image

Вот примериспользования этого:

import FastImage from 'react-native-fast-image'

const YourImage = () => (
    <FastImage
        style={styles.image}
        source={{
            uri: 'https://unsplash.it/400/400?image=1',
            headers: { Authorization: 'someAuthToken' },
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)

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