React Native ListView:前置项目

Posted

技术标签:

【中文标题】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 是偏移最终目标位置的固定像素数。

【讨论】:

以上是关于React Native ListView:前置项目的主要内容,如果未能解决你的问题,请参考以下文章

React Native ListView 不更新数据更改

react-native:ListView,如何从顶部推送新行

是否可以同时在 react-native 中使用前置和后置摄像头?

ListView 部分数据(react-native)

react-native-page-listview使用方法

React Native 自定义ListView