React-Native Flatlist повторно выполняет рендеринг изображений при изменении состояния

Установка!
У меня есть динамическая загрузка изображений в чате, как интерфейс с сообщениями, которые представляют собой просто текст, или сообщениями, которые представляют собой изображения и текст. В настоящее время у меня он работает, когда он загружает изображения с внешнего URL-адреса, который хранится в хранилище firebase с метаданными CacheControl, установленными для разрешения кеширования изображений.

Я показываю изображение через стандартную библиотеку, поддерживающую реакцию. Изображение в довольно стандартном плоском списке. Единственная странная вещь, которую я делаю, - это условное добавление компонента на основе состояния в данных плоского списка. ПРИМЕР:

    ImageOrViewMessages = (props) => {   
                if (item != null && item.image != ''){               
                    return (
                        <View>
                            <Image source = {{uri: item.image, cache: "force-cache"}} style = {{display: 'flex', height: 300, flex: 1, padding: 5}} />
                        </View>
                    )
                } else {
                    return(
                        <View style = {{display: 'none'}}></View>
                    )
                }
            }

Вот мой список:

    <FlatList
        data = {this.props.unsent_messages.length > 0 && this.props.chat != '' ? this.props.unsent_messages.concat(this.props.messages) : this.props.messages}
        renderItem = {({item}) => {
            var align_text = "flex-end"
            var background_color = colors.main_color_light;
            var text_color = "white"
            var stamp = "none"
            if (item.username.toLowerCase() != this.props.displayName.toLowerCase()){
                //do something differ
                align_text = "flex-start"
                background_color = colors.main_color_dark;
                text_color = "white"
                stamp = "flex"
            }
            ImageOrViewMessages = (props) => {   
                if (item != null && item.image != ''){               
                    return (
                        <View>
                            <Image source = {{uri: item.image, cache: "force-cache"}} style = {{display: 'flex', height: 300, flex: 1, padding: 5}} />
                        </View>
                    )
                } else {
                    return(
                        <View style = {{display: 'none'}}></View>
                    )
                }
            }


            return(
                <View style = {{padding: 5, minHeight: 70, alignItems: align_text, justifyContent: "center"}}>
                    <View style = {{opacity: item.id.toString().includes("Unset") ? .3 : 1, backgroundColor: background_color, padding: 5, borderWidth: 0, borderColor: colors.border_color,borderRadius: 8 , width: (Dimensions.get('window').width / 2) - 10, alignSelf: align_text}}>
                        <Text style = {{fontFamily: "MarkerFelt-Thin", color: text_color, fontSize: 16, textAlign: "left", flex: 1}}>{item.message}</Text>
                        {/* <Text style = {{display: stamp, fontFamily: "MarkerFelt-Thin", color: colors.background_color, fontSize: 14, textAlign: "right", flex: 1}}>{item.username}</Text> */}
                        <ImageOrViewMessages />
                    </View>
                </View>
            )}
            }
            keyExtractor = {item => item.image != '' ? item.image : item.id.toString()}   
            style = {{display: 'flex', flex: 1, borderTopLeftRadius: 25, borderTopRightRadius: 25}}    
            ref = {ref => this.flatList = ref}
            inverted = {true}  
        />

Проблема!
Изображения отображаются отлично, но каждый раз их приходится загружать с моего сервера, а не хранить в кеше. Я пытался убедиться, что моя метадета на загруженном изображении установлена ​​правильно. Принудительное кеширование через свойство изображения «Кэш». Я убедился, что у меня есть уникальный набор ключей для каждого элемента в списке, включая изображения с помощью средства извлечения ключей. Я также могу без проблем кэшировать изображение на своей главной странице (когда его больше нет в плоском списке)

Вы имеете в виду, что изображения загружаются при рендеринге плоского списка? Управление кешем работает только в IOS. Я предлагаю использовать response-native-fast-image или react-native-img-cache.

Aung Myat Hein 19.07.2018 05:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
2 451
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Замените загрузку изображения на изображение ниже:

 <FastImage
    style = {styles.image}
    source = {{
      uri: YOUR_IMAGE_URL,
      priority: FastImage.priority.normal,
    }}
    resizeMode = {FastImage.resizeMode.contain}
  />

Не забудьте импортировать FastImage.

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

Другие вопросы по теме