React-Native Flatlist 在状态改变时重新渲染图像

Question

设置！
我在聊天中有动态加载图像 - 比如界面只是文本的消息，或者是图像和文本的消息。目前我正在使用它从存储在 firebase 存储中的外部 url 加载图像，元数据 CacheControl 设置为允许图像缓存。

我正在通过一个标准的 react-native 库图像在一个非常标准的平面列表中显示图像。我正在做的一件奇怪的事情是根据平面列表数据中的状态有条件地添加一个组件。示例：

    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}  
        />

问题！
图像呈现得非常好，但每次它们都必须从我的服务器下载，而不是存储在缓存中。我尝试过的事情是确保我在上传图片上的 metadeta 设置正确。通过Image属性"Cache"强制缓存。我已确保通过密钥提取器为列表中的每个项目（包括图像）设置了唯一的密钥。 我也可以毫无问题地将图像缓存在我的主页上（当它不再在平面列表中时）

Answer 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'

React-Native Flatlist 在状态改变时重新渲染图像

React-Native Flatlist is re-rendering images whenever state change

javascript

image

reactjs

react-native

react-native-flatlist