The setup!
我有一个动态加载图像的聊天 - 类似的界面与只是文本的消息,或图像和文本的消息 . 目前我的工作是从外部URL加载图像,该外部URL存储在firebase存储中,元数据CacheControl设置为允许图像缓存 .
我通过标准的反应原生库Image在一个非常标准的平面列表中显示图像 . 我正在做的一件事是奇怪的是有条件地添加基于flatlist数据中的状态的组件 . 例:
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}
/>
The Issue! 图像渲染完美,但每次都必须从我的服务器下载,而不是存储在缓存中 . 我尝试过的事情是确保上传图像上的metadeta设置正确 . 通过Image属性强制缓存"Cache" . 我确保列表中的每个项目都有一个唯一的密钥集,包括通过密钥提取器的图像 . I am also able to cache the image on my main page without any issue (when it is no longer in a flatlist)
1 回答
是的,每次都会从服务器重新渲染图像 . 您需要在默认应用程序或设备内存中缓存图像 . 最好的方法是FastImage用于延迟加载 .
用下面的一个替换你的图像负载:
别忘了导入FastImage .