Установка!
У меня есть динамическая загрузка изображений в чате, как интерфейс с сообщениями, которые представляют собой просто текст, или сообщениями, которые представляют собой изображения и текст. В настоящее время у меня он работает, когда он загружает изображения с внешнего 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}
/>
Проблема!
Изображения отображаются отлично, но каждый раз их приходится загружать с моего сервера, а не хранить в кеше. Я пытался убедиться, что моя метадета на загруженном изображении установлена правильно. Принудительное кеширование через свойство изображения «Кэш». Я убедился, что у меня есть уникальный набор ключей для каждого элемента в списке, включая изображения с помощью средства извлечения ключей. Я также могу без проблем кэшировать изображение на своей главной странице (когда его больше нет в плоском списке)



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Да, это будет каждый раз повторно рендерить изображение с сервера. Вам необходимо кэшировать изображение в приложении по умолчанию или в памяти устройства. Лучший способ - это 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'
Вы имеете в виду, что изображения загружаются при рендеринге плоского списка? Управление кешем работает только в IOS. Я предлагаю использовать response-native-fast-image или react-native-img-cache.