Question

是否可以在onTopReached事件上将项目添加到React Native的ListView，类似于在onEndReached事件中附加项目的方式？目前，当我将行前置到列表中时，ListView会滚动到顶部。

用例：我有一个带有Feed的应用，用户可以向下滚动。当从导航中导航然后返回到导航时，我想在顶部显示最后看到的行。然后，用户应该能够向上滚动以查看她/他已滚动的前一行，当然还可以向下滚动以加载新行。假设我已经从最后一次看到的行开始渲染ListView，一个人为的例子看起来像这样：

  _onTopReached() {
    this._unshiftRows();
  },

  _unshiftRows() {
    var list = this.props.list; // The entire list
    var lastSeenRowIndex = this.props.lastSeenRowIndex;
    var prevRows = list.slice(0, i);  
    this._rows = prevRows.concat(this._rows);
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this._rows)
    });
  },

在上面的示例中，我只是将列表的第一部分预先添加到已经渲染的最后一部分，_onTopReached立即触发，因为我已经位于顶部。但是，这会导致ListView使用屏幕顶部的第一行重新渲染，而不是保持先前的位置。

另一种方法是存储上次看到的行的y偏移量，然后导航回ListView滚动到该位置。但是，该方法需要在当前行之前的每一行进行渲染，这是耗时的。我也无法通过scrollWithoutAnimationTo或设置contentOffSet来获得正确的偏移量。但是，如果我在调用scrollTo之前使用scrollWithoutAnimationTo或设置超时并允许第一行在平均时间内呈现，则会滚动到正确的位置。但那不是很好。

非常感谢所有帮助。谢谢！

Answer 1

您应该使用FlatList

尝试将新项添加到数据源并使用'scrolltoindex'方法。

FlatList

scrollToIndex（params：object）滚动到指定索引处的项目，使其位于可视区域中，以便viewPosition 0将其置于顶部，1位于底部，0.5位于中间。 viewOffset是一个固定数量的像素，用于偏移最终目标位置。

React Native ListView：Prepend Items

1 个答案: