HighLight / ScrollTo - ListView,React-Native上的ScrollView

时间:2016-01-22 23:57:11

标签: listview scrollview react-native

我和反应本地人玩了一下,我陷入了一个我无法自己解决的阶段。我有一个项目列表,我想自动滚动到某个项目。

我知道我可以使用ScrollView和contentOffset = {{x:0,y:0}}并设置和偏移,但是它会更复杂一些,因为我需要跟踪每个项目的位置,我想知道是否有一种简单的方法,所以我可以专注于ListView中的特定行。

libs上有这样的东西吗?

2 个答案:

答案 0 :(得分:13)

ScrollView不提供滚动到特定列表项的方法 - 但它确实提供了方法scrollTo({x, y, animated})

如果您的列表项具有相同的高度,则可以使用它们通过调用scrollTo({y:itemIndex * ROW_HEIGHT})来实现滚动到特定项目。

为了能够访问ScrollView实例,您需要使用ref属性回调进行捕获:

<ScrollView ref={view => this._scrollView = view} />

并将滚动位置设置在其他位置:

scrollToRow(itemIndex) {
  this._scrollView.scrollTo({y:itemIndex * ROW_HEIGHT});
}

答案 1 :(得分:4)

我已发布react-native-scroll-into-view,这是一个启用&#34; scrollIntoView&#34;的库。 React Native ScrollView的功能。

对于像SectionList这样的其他列表,您仍然可以使用其他答案中提到的项目索引。