listview - React Native ListView : Prepend Items

Question

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

用例:我有一个带有用户可以向下滚动的提要的应用程序。当离开提要然后返回提要时，我想在顶部显示最后看到的行。然后，用户应该能够向上滚动以查看她/他滚动过的先前行，当然也可以向下滚动以加载新行。假设我已经从最后看到的行开始渲染 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) Scrolls to the item at the specified index such that it is positioned in the viewable area such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. viewOffset is a fixed number of pixels to offset the final target position.