React Native ListView:Prepend Items

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”方法。

平面列表

scrollToIndex(params: object) 滚动到指定索引处的项目，使其位于可视区域中，viewPosition 0 将其放置在顶部，1 将其放置在底部，0.5 将其放置在中间居中。viewOffset 是偏移最终目标位置的固定像素数。