更新 Flatlist 数据后的 ScrollToEnd [英] ScrollToEnd after update data for Flatlist

问题描述

我正在用 Flatlist 制作一个聊天框.我想向数据添加一个新项目，然后滚动到列表底部.我使用 scrollToEnd 方法但它不起作用.我该怎么做?

I'm making a chat box with Flatlist. I want to add a new item to data then scroll to bottom of list. I use scrollToEnd method but it did not work. How can I do this?

<FlatList
        ref="flatList"
        data={this.state.data}
        extraData = {this.state}
        renderItem={({item}) => <Text style={styles.chatFlatListItem}>{item.chat}</Text>}
/>

AddChat(_chat){
    var arr = this.state.data;
    arr.push({key: arr.length, chat: _chat});
    var _data = {};
    _data["data"] = arr;
    this.setState(_data);
    this.refs.flatList.scrollToEnd();
 }

推荐答案

我找到了一个更好的解决方案，scrollToEnd() 不起作用，因为它在对 进行更改之前被触发FlatList.
由于它继承自 ScrollView，这里最好的方法是在 onContentSizeChange 中调用 scrollToEnd()，如下所示:

I found a better solution,scrollToEnd() is not working because it is triggered before the change is made to the FlatList.
Since it inherits from ScrollView the best way here is to call scrollToEnd() in onContentSizeChange like so :

<FlatList
            ref = "flatList"
            onContentSizeChange={()=> this.refs.flatList.scrollToEnd()} /> 

这篇关于更新 Flatlist 数据后的 ScrollToEnd的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！