首页 文章

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

提问于
浏览 次
0

我正在使用React Native制作聊天应用程序，在我的应用程序中，我有一个Flatlist来显示消息 . 当用户拉出列表时，它将获取新数据并添加到列表中 . 但列表将重新渲染并滚动到开始项目 . 反正有没有让它仍然获得数据，但保持目前的位置，如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>
react-native

2 回答

  • 0

    使用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)]
    })
  }
}
    回复于
  • 1

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

    此外，不推荐使用ref字符串 . 您可以使用

    ref={ (flatList) => this.flatList = flatList }
    回复于

相关问题