如何在 React Native 中制作像 Facebook Messenger 这样的聊天列表答案

【问题标题】：How to make a Chat list like Facebook Messenger in React Native如何在 React Native 中制作像 Facebook Messenger 这样的聊天列表
【发布时间】：2018-07-23 18:27:12
【问题描述】：

我正在用 React Native 制作一个聊天应用程序，在我的应用程序中我有一个平面列表来显示一条消息。当用户拉出列表时，它将获取新数据并添加到列表中。但是列表将被重新渲染并滚动到开始项目。有没有办法让它仍然获取数据但保持在当前位置，比如 Facebook Messenger ？我正在使用这样的 FlatList：

                    <FlatList
                        refreshControl={
                            <RefreshControl 
                                refreshing = {this.state.refreshing}
                                onRefresh = {this.addMessageToList}
                            />
                        }
                        keyExtractor={(item, index) => index.toString()}
                        ref="flatList"
                        style={{ flex: 1 }}
                        data={newList}
                        renderItem={({ item, index }) => {
                            return (
                                <ChatContentItems item={item} index={index} parentFlatList={this}>
                                </ChatContentItems>
                            );
                        }}>
                    </FlatList>

【问题讨论】：

你的意思是延迟加载吗？
是的，如何使用 flatlist 制作它？
你的API支持分页还是要自己拆分数组？
我自己做。

标签： react-native

【解决方案1】：

当用户到达终点时，使用onEndReached 事件来处理。

<FlatList
    data={this.state.latestData}
    keyExtractor={item => item.id.toString() }
    renderItem={({item}) => <JobsListCell item={item}/>}
    onEndReached={this.loadMore.bind(this)} // add this
    onEndReachedThreshold={0.3} /> // and this. change according to your preference.

由于您拥有完整的数组，因此将下一个项目切片并附加到最新的数组中。

loadMore() {
  let { latestData, fetchedData, incrementingAmount } = this.state;
  if (latestData.length < fetchedData.length) {
    this.setState({
      latestData: [...latestData, ...fetchedData.slice(latestData.length, latestData.length + incrementingAmount)]
    })
  }
}

【讨论】：

太好了！我需要在列表顶部加载数据，所以我想我需要使用 refreshControl 对吗？以及如何将 fetchedData 附加到 latestData 的开头？
我已尝试附加它，但列表将重新呈现并显示在第一项。我的意思是如何让它在顶部获取数据但仍然保持在当前位置，比如 Facebook Messenger ？
可能类似于 onStartReached 和顶部的数据获取
您希望将数据添加到顶部？ @EmBeCoRau FlatList documentation 中没有像 onStartReached 这样的东西，除非你想刷新列表，否则你不想要 refreshControl。
是的，因为我在进行应用聊天，例如 Fb messenger，只要用户滚动到列表顶部，就会显示聊天历史记录。

【解决方案2】：

您可以在 addMessageToList 完成后使用 scrollToEnd 或 scrollToItem

此外，不推荐使用 ref 字符串。你可以使用

   ref={ (flatList) => this.flatList = flatList }

【讨论】：

你能给我一个例子，我可以在 onRefresh 中应用延迟加载，我只是一个新手。
在这个聊天列表的特殊场景中，@lasitha 的解决方案应该会更好，因为最新的项目是列表的底部。但是如果你想在顶部加载旧的聊天项目，refreshControl 是这样做的方法，但是你不想滚动回到项目的末尾。在这种情况下，您可以添加类似 loadPrevious 的内容并在顶部附加项目