Блог

На самом деле я пытаюсь создать приложение для чата, в котором я отображал все чаты с использованием плоских списков, и я упорядочил чаты в соответствии с их последним временем сообщения в порядке убывания, при изменении порядка сообщений чата изображение в компоненте чата мерцает. Пожалуйста, предложите мне способ предотвратить это мерцание, в WhatsApp и telegram мерцания не происходит, я также хочу иметь плавный пользовательский интерфейс в моем приложении для чата.

Я использовал React Native для интерфейса.

Вот код плоского списка..

  <FlatList
        data={state.connections}
        refreshing={state.loading}
        onRefresh={fetchLatestData}
        ListHeaderComponent={<Searchbar
            key="editor"
            placeholder="Search me..."
            value={state.searchValue}
            style={{ margin: 15, marginTop: 0 }}
            onChangeText={(value) => { fetchConnections(value) }}
        />}
        ListHeaderComponentStyle={{ width: width * 1 }}
        renderItem={({ item }) => {

            let doc_id = getDocId(item.uid, state.userData.uid)

            return <ChatCardComponent key={item.uid} data={item} navigation={navigation} userData={state.userData} latestMessageData={state.chattedFriends.get(doc_id)} />
        }}
        keyExtractor={(item, id) => item.uid}

    />
  

ChatCardComponentCode является,

Я использовал react-native-expo-cached-image для компонента изображения

  const uri = data.photoUrl;

    return (
        <View style={styles.container}>

            <TouchableOpacity key={data.uid} onPress={() => { props.navigation.navigate('chatWindow', { data: data, userData: userData }) }}>
                <View style={styles.chatContainer}>

                 
                    <CachedImage
                        style={{ width: 80, height: 80, borderRadius: 60 }}
                        source={{ uri: uri }}
                    />
                    </View>
              </TouchableOpacity>
              </View>  

Пожалуйста, предложите мне исправить эту проблему.