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 中使用前置和后置摄像头?