Question

我正在用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>

Answer 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)]
    })
  }
}

Answer 2

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

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

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

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

2 个答案: