React Native ListView：前置项目

Posted 2023-02-16

【中文标题】React Native ListView：前置项目

【英文标题】：React Native ListView: Prepend Items

【发布时间】：2016-05-23 15:42:36

【问题描述】：

是否可以在 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 之前设置超时并允许同时呈现第一行，它确实会滚动到正确的位置。但这不是很好。

所有帮助将不胜感激。谢谢！

【问题讨论】：

我喜欢 react native，但我也发现 ListView 很难（相当）简单地实现这样的工作......祝你好运！

谢谢本。 ListView 也让我很沮丧。

嘿，你有没有想过这个？我已经能够让它滚动到适当的位置，但它会暂时显示令人沮丧的新内容。

我最终采取了另一种方式，这可能与您的问题无关。我想导航回到我离开它的状态的提要。因此，使用（有争议的）导航器组件，我只是弹回提要场景，而不是在每个路由事件上再次推送它。这样，用户就被带到场景中的状态。但这与 ListView 本身无关。如果您的列表中有固定高度的项目，您可能需要查看this。

我也在寻找如何解决这个问题的线索。当我的用户去up时，我使用 slice(0,20)，当我的用户宕机时，我使用 slice(-20)。但是 CX 很糟糕，因为我的组件有不同的高度，而且我不知道如何将 ListView 滚动回正确的位置。

【参考方案1】：

你应该使用 FlatList

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

FlatList

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