HighLight / ScrollTo - React-Native 上的 ListView、ScrollView答案

【问题标题】：HighLight / ScrollTo - ListView, ScrollView on React-NativeHighLight / ScrollTo - React-Native 上的 ListView、ScrollView
【发布时间】：2016-01-22 23:57:10
【问题描述】：

我正在玩一些 react-native，但我被困在一个我无法自己解决的阶段。我有一个项目列表，我想自动滚动到某个项目。

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

库中有这样的东西吗？

【问题讨论】：

好问题，我也很想听听解决方案
我刚遇到这个。检查一下，如果有帮助请告诉我github.com/facebook/react-native/commit/…
感谢克里斯的提示！

标签： listview scrollview react-native

【解决方案1】：

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});
}

【讨论】：

谢谢@jevakillio，我试试看。
但是如果你的行是可变高度的呢？
@chandlervdw 可能是您可以使用facebook.github.io/react-native/docs/… 来测量位置，或者将所有先前行的高度测量到您想要在屏幕上显示的行并将它们相加。（我知道这条评论来自 >1 年前，但这在谷歌中显示）
我刚刚发现 SectionList 确实有一个 scrollToLocation 接收部分和项目的索引。 ListView 没有这个，我不知道为什么。可能你可以使用SectionList，只包含一个section，渲染为空，然后使用这个方法。当然它不是很优雅，但对于可变高度的行（facebook.github.io/react-native/docs/…）来说，它可能比其他任何东西都更好用
facebook.github.io/react-native/docs/scrollview#scrollto 参数已更改，更新答案

【解决方案2】：

我已经发布了react-native-scroll-into-view，这是一个为 React Native ScrollView 启用“scrollIntoView”功能的库。

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

【讨论】：

对于 ScrollView 中具有可变高度的项目，这是一个更好的解决方案。
绝妙的解决方案！