React native: плохая производительность приложения после загрузки изображений - PullRequest
Новая
       5

React native: плохая производительность приложения после загрузки изображений

4 голосов
/ 05 апреля 2020

Кажется, нет проблем с загрузкой изображений. Но есть проблема после того, как они уже загружены.

В моем приложении я загружаю изображения карт по одному на протяжении всей игры. Как только я дошел до того, что загрузил 40 изображений карт, все приложение замедляется. Это всегда происходит на 40-м изображении, и когда я продолжаю загружать больше изображений с карты после 40-го, оно становится медленнее после каждой загрузки изображения.

Практические сведения:

  1. Реагирование с использованием expo
  2. Требование изображений из локальной папки в массив и импорт этот массив.
  3. Размер одного изображения от 15 КБ до 120 КБ, все изображения вместе: 3,1 МБ
  4. Компонент, используемый для отображения изображения: Image (реагирует на простое простое изображение) компонент)
  5. Использование Array.map для отображения всех изображений

Переключение всех изображений с некрасивыми изображениями общим объемом 300 КБ - позволяет приложению быстро работать без проблем

Требуемый массив импортирован: 

const CardsUris = [
  {uri:require('../assets/AC.png'), key:'AC'},
  {uri:require('../assets/AD.png'), key:'AD'},
  {uri:require('../assets/AH.png'), key:'AH'},
  {uri:require('../assets/AS.png'), key:'AS'}...
]

Структура дерева компонентов: 

- Base
    - Container
        - <Image source={CardsUris[index].uri} />

Есть ли способ устранить эту проблему? Я не смог найти ничего о такой проблеме, которая появляется после загрузки изображений.

Ответы [ 2 ]

1 голос
/ 12 апреля 2020

Я чувствую вашу боль.

Одна вещь, которую я нашел, что вы можете попытаться повысить производительность, это объединение ресурсов изображения в ваш двоичный файл . Чтобы сделать это с Expo, используйте клавишу assetBundlePatterns в приложении. json, чтобы предоставить список путей в каталоге вашего проекта: 

"assetBundlePatterns": [
  "assets/images/*"
],

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

Итак, вы можете попробовать это FastImage - Image замена, которая решает эти проблемы. FastImage - это оболочка вокруг SDWebImage (iOS) и Glide (Android) , так что это секретный соус.

Вы делаете изображения в <FlatList />? Если так, я бы тоже дал response-native-optimized-flatlist . Это оптимизированная версия компонента React Native <FlatList />, который удаляет каждый элемент, который не находится внутри области просмотра.

Если больше ничего не поможет, я бы go для уменьшенных уменьшенных изображений для изображений, когда они ' все 40 в виде сетки.

0 голосов
/ 12 апреля 2020

У меня была такая же проблема. Вы можете попробовать использовать FastImage с предварительной загрузкой.
https://github.com/DylanVann/react-native-fast-image#fastimagepreload -source - void

...