react-native - 更新 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

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

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