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

如下更改您的代码。 ref 已修改，根据 this.

，最好在 FlatList 中使用 getItemLayout

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

<FlatList
    ref={elm => this.flatList = elm}
    data={this.state.data}
    extraData = {this.state}
    renderItem={({item}) => <Text style={styles.chatFlatListItem}>{item.chat}</Text>}
    getItemLayout={(data, index) => (
      {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
    )}
/>

注意： 将 ITEM_HEIGHT 替换为列表项高度的实际值。

Answer 2

谢谢@Kernael，只需像这样添加一个超时：

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

Answer 3

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

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

Answer 4

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 5

尝试在 Fatlist 本身上使用 inverted prop
像这样传递你的数据[...data].reverse()
如果您在列表中间，并且需要在添加新项目时滚动到末尾，只需使用：
```
ref  => flatlistRef.current?.scrollToOffset({offset:0})
```

Flatlist 更新数据后的 ScrollToEnd

ScrollToEnd after update data for Flatlist

react-native

react-native-flatlist