ReactNative - Android очень медленно в пределах просмотра изображений - PullRequest
Новая
       6

ReactNative - Android очень медленно в пределах просмотра изображений

0 голосов
/ 11 января 2020

Я реализую главный экран, на котором много изображений. Концепция похожа на слои Photoshop. Каждый слой представляет собой изображение (PNG). Экран содержит 20-30 изображений. Ресурсы хранятся локально.

Приложение работает нормально на iOS, но очень медленно Android. Мое первое решение - это уменьшение размеров файлов, но это не очень помогает.

Спасибо за любую помощь, которую вы можете предложить!

Реактивная версия - 0.59.10.

Ответы [ 2 ]

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

вы можете использовать response-native-fast-image

https://github.com/DylanVann/react-native-fast-image

, если не решили, попробуйте поместить ваши изображения в пакет приложения 

android/app/src/main/res/drawable
0 голосов
/ 11 января 2020

Существует несколько способов улучшить производительность вашего приложения.

1. Уменьшите размер изображения

Используйте изображения меньшего размера, например миниатюру.
Используйте PNG вместо JPG.
Преобразуйте изображения в формат WebP.

2 , Кэшируйте изображения локально

Так как вы загружаете изображения из локально, вам не нужно фокусироваться на этом.

3. Избегание ненужных рендеров с помощью PureComponent


Если вы используете FlatList для рендеринга изображений,

4. Добавьте initialNumToRender prop в свой FlatList

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

5. Определите ключевую (keyExtractor) опору для вашего компонента

Это позволит избежать повторного рендеринга динамически добавляемых или удаляемых элементов.

6. Используйте getItemLayout, чтобы пропустить измерение содержимого динамического c.

Кроме того, есть некоторая опора, называемая maxToRenderPerBatch, windowSize, которую можно использовать для повышения производительности приложения.

Check React Native Flatlist & Performance официальные документы для получения дополнительной информации.

Кроме того, проверьте эту статью , чтобы улучшить производительность FlatList.

...