Friday, May 24, 2019

Кеширование изображений в react-native

Для отображения фотографий в приложении используется компонент Image. Параметр source может содержать как ссылку на локальный файл, так и URL. В приложении IQITO фотографии хранятся на удаленном сервере и очень часто весят несколько мегабайт. Необходимо реализовать кеширование фото на стороне приложения.

Важно отметить, что в данной задаче фото на сервере не будут меняться и их можно кешировать «навсегда»


Решение «из коробки»


Когда программисты говорят «из коробки» - это означает готовое решение в используемом фреймворке/библиотеке. В react-native готового решения нет 😕. Пока есть только Cache Control (iOS Only) , который не подходит.


Сторонние модули


В интернете я нашел такие модули:
  1. react-native-image-cache-hoc (10+ issues)
  2. react-native-img-cache (25+ issues)
  3. react-native-fast-image (100+ issues)
react-native-image-cache-hoc не работает вообще,
react-native-img-cache не работает с изображениями, которые выбраны с локальной памяти,
react-native-fast-image не работает вообще.


react-native-img-cache


Кроме установки модулей были сделаны такие изменения в коде:


Кроме того, если изображение выбрано с локального устройства, То кешировать не надо.