По большей части компонент Image в React Native обрабатывает кэширование изображений так же, как это делают браузеры. Если сервер возвращает правильные заголовки управления кешем для изображений, вы, как правило, получаете встроенное поведение кэширования, которое вы имели бы в браузере. Даже так многие люди заметили:

  • Мерцание.
  • Кэш промахивается.
  • Низкопроизводительная загрузка из кеша.
  • Низкая производительность в целом.

FastImage – это альтернатива Image, решающая эти проблемы.

Функции

  • Агрессивно кэшируйте изображения.
  • Добавьте заголовки авторизации.
  • Расставьте приоритеты для изображений.
  • Предварительная загрузка изображений.
  • Поддержка GIF.
  • Радиус границы.

Использование
Примечание. Чтобы использовать самую последнюю версию react-native-fast-image, вы должны использовать React Native 0.60 .0 или выше.

yarn add react-native-fast-image
cd ios && pod install
import FastImage from 'react-native-fast-image'
const YourImage = () => (
<FastImage
style={{ width: 200, height: 200 }}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers: { Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
)

Webner Solutions — компания по разработке программного обеспечения, специализирующаяся на разработке систем управления страховыми агентствами, систем управления обучением и приложений Salesforce. Свяжитесь с нами по адресу [email protected] для подачи заявок на страхование, электронное обучение и Salesforce.

Первоначально опубликовано на https://blog.webnersolutions.com 28 сентября 2021 г.