StickyHeaderIndices 在倒置的 FlatList 中无法正常工作 [英] stickyHeaderIndices does not work properly in an inverted FlatList

问题描述

我还是个新手，我正在开发一个聊天应用程序.我正在使用 <FlatList/> 元素来显示一长串消息并向其添加 inverted 属性，以默认显示最后一条消息.但是让我的 FlatList 倒置，扰乱了我用来显示消息日期的 stickyHeaderIndices 的功能(就像他们在 WhatsApp 中所做的那样).已经两天了，我被困在这里了.

I am still new to react native and am working on a chat app. I am using <FlatList /> element to display the long list of messages and add inverted prop to it, to show the last messages by default. But making my FlatList inverted, disturbed the functionality of stickyHeaderIndices that I am using to display the days of the messages (like they do in WhatsApp). Its been two days, I am stuck on this.

我还附上了 <FlatList/> 我正在使用的一段代码

I am also attaching the piece of code for <FlatList/> I am using

<FlatList
    style={{ flex: 1 }}
    data={messageList}
    renderItem={this.renderMessage}
    keyExtractor={(item, index) => index.toString()}
    showsVerticalScrollIndicator={false}
    stickyHeaderIndices={stickyHeaders}
    inverted
/>

其中变量 messageList 是所有消息的数组，包括我希望显示的标题，this.renderMessage 显示单个消息，stickyHeaders 是一个数组，其中包含存储在 messageList 中的标头索引.

where variable messageList is an array of all the messages, inlcuding the headers I wish to display, this.renderMessage displays the individual message, stickyHeaders is an array with indexes of the headers that are stored in messageList.

推荐答案

我认为目前在 React Native 中是不可能的.我刚刚意识到这可能就是 Instagram 没有在他们的聊天中提供此功能的原因.

I think it is not possible as of now in React Native. I just realized that is maybe why Instagram doesn't provide this feature in their chat.

如果将来有人阅读它知道正确的实现或解决方案，请留下答案.现在，我只是放弃了在我的聊天应用程序的倒排列表上使用粘性标题的想法.谢谢:(

If someone reading it in the future knows the right implementation or solution for it, please drop by an answer. For now, I just dropped the idea of using sticky headers on an inverted list in my chat app. Thanks :(

这篇关于StickyHeaderIndices 在倒置的 FlatList 中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！