React Native ListView:前置项 [英] React Native ListView: Prepend Items
问题描述
是否可以在onTopReached事件上将项目添加到React Native的ListView中，就像在onEndReached事件中添加项目一样?目前，当我在列表前添加行时，ListView会滚动到顶部.
Is it possible to prepend items to React Native's ListView on an onTopReached event similar to the way one appends items on an onEndReached event? Currently, when I prepend rows to the list the ListView scrolls to the top.
用例:我有一个带有供稿的应用程序，用户可以向下滚动.当导航离开提要，然后返回到提要时，我想在顶部显示最后看到的行.然后，用户应该可以向上滚动以查看她/他滚动过去的行，当然也可以向下滚动以加载新行.假设我已经从最后看到的行开始渲染了ListView，那么一个人为的示例将如下所示:
The use case: I have an app with a feed the user can scroll down. When navigating away from the feed and then back to it I want to show the last seen row at the top. The user should then be able to scroll either up to see the previous rows she/he has scrolled passed and of course down to load new rows. Assuming I've already rendered the ListView starting from the last seen row a contrived example would look something like this:
_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重新呈现，并且第一行位于屏幕顶部，而不是保持先前的位置.
In the example above I'm just prepending the first part of the list to the already rendered last part with _onTopReached firing right away because I'm already at the top. This however causes the ListView to re-render with the first row at the top of the screen rather than maintaining the previous position.
另一种方法是存储最后看到的行的y偏移量，然后导航回ListView滚动到该位置.但是，该方法需要在当前行之前的每一行进行渲染，这非常耗时.我也无法通过scrollWithoutAnimationTo或通过设置contentOffSet来获得正确的偏移量.但是，如果我使用scrollTo或在调用scrollWithoutAnimationTo之前设置了超时并允许在第一时间渲染第一行，它确实会滚动到正确的位置.但这不是很好.
An alternative is to store the y offset of the last seen row and on navigating back to the ListView scroll to that position. However, that method requires every row before the current one to render which is time consuming. I've also not been able to get the correct offset with scrollWithoutAnimationTo or by setting contentOffSet. It does however scroll to the correct position if I use scrollTo or set a timeout before calling scrollWithoutAnimationTo and allow for the first rows to render in the mean time. But that's not very nice.
所有帮助将不胜感激.谢谢！
All help would be much appreciated. Thanks!
推荐答案
您应使用FlatList
You should use FlatList
尝试将新项目添加到数据源，并使用"scrolltoindex"方法.
Try adding the new items to the data source and use the 'scrolltoindex' method.
scrollToIndex(参数:对象) 滚动到指定索引处的项目，以便将其定位在可见区域中，以使viewPosition 0将其放在顶部，将1放在底部，将0.5放在中间的中心. viewOffset是固定数量的像素，可以偏移最终目标位置.
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.
这篇关于React Native ListView:前置项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
