更新Flatlist数据后的ScrollToEnd

Question

我正在与建立一个聊天框Flatlist。我想向数据添加一个新项目，然后滚动到列表底部。我使用scrollToEnd方法，但是没有用。我怎样才能做到这一点？

<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();
 }

Answer 1

const flatList = React.useRef(null)
<FlatList
        ref={flatList}
        onContentSizeChange={() => {
            flatList.current.scrollToEnd();
        }}
        data={this.state.data}
        extraData = {this.state}
        renderItem={({item}) => <Text style={styles.chatFlatListItem}>{item.chat}</Text>}
/>

试试这个，它有效。

Answer 2

谢谢@Kernael，只需添加一个超时，如下所示：

setTimeout(() => this.refs.flatList.scrollToEnd(), 200)

Answer 3

我发现了一个更好的解决方案，scrollToEnd()因为它是在对进行更改之前触发的，因此无法正常工作FlatList。
因为它继承ScrollView了最好的方法scrollToEnd()，onContentSizeChange所以像这样调用：

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