小编Cha*_*eth的帖子

如何将新项目推送到 FlatList 的数据，同时保持更新前的顶行在更新后可见，并且 FlatList 不应滚动到顶部到上面推送的新项目？

问题：当使用需要渲染当前顶行上方的行的新数据更新组件状态时，FlatList 将重新渲染并从顶部重新启动 contentOffset.y。

示例：假设我有以下 FlatList 初始加载数据

this.state = {
    data: [
        {title: '2019-03-10', events: []}, 
        {title: '2019-03-11', events: []}, 
        {title: '2019-03-12', events: []}, 
    ]

}

顶部可见行是标题为“2019-03-10”的项目，然后假设我拉动刷新并想要推送这个新数据 ->

const newData = [
    {title: '2019-03-07', events: []}, 
    {title: '2019-03-08', events: []}, 
    {title: '2019-03-09', events: []}, 
]

进入这样的状态 ->

this.setState({
    data: this.mergeAndSortData(this.state.data, newData)
})

现在我的数据按标题的升序日期排序，因此我将新数据添加到当前顶部可见行的数据上方，并且所有行的索引都会更改，这会强制 FlatList 重新加载，并通过重置 contentOffset.y为 0，当前顶部可见行的标题为“2019-03-07”。

首选：我想要一种使用新数据进行更新并将前一个顶部可见行保留在原处的方法。

使这变得更加复杂的另一个条件是每一行可以是任何给定的高度，没有为所有行设置高度。

尝试过：这是我迄今为止尝试过的

1. 组件更新后设置initialScrollIndex状态。

   结果：没有做任何事情，我猜initialScrollIndex只在初始加载时起作用，甚至在重新加载FlatList数据后也不起作用。

2. 在更新之前和更新之后获取当前滚动偏移 y，计算 FlatList 需要为新项目添加多少估计高度，并调用该估计高度的 this.list.scrollToOffset。

   结果：必须让滚动超时才能执行任何操作，这会导致每次更新和滚动后 …