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

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

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

Answer 2

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 3

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

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

Answer 4

更改您的代码，如下所示。 ref已修改，最好根据this在getItemLayout中使用FlatList。

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替换为列表项高度的实际值。

更新Flatlist数据后ScrollToEnd

4 个答案: