如何确定 scrollview（或 listview）child 在 React Native 中是否大部分在视图中

Question

我目前正在使用 ListView 来显示一些数据。由于设计原因，行占据了屏幕高度的 70%，这意味着总是至少有 2 行可见，最多 3 行。我想确定的是哪一行最明显。

我目前正在使用 onChangeVisibleRows，但这只会告诉我哪些行可见或已进入或离开视图。

有什么想法吗？

Answer 1

我没有足够的时间为你的问题设计一个准确的算法。但这是您可以做的-

获取滚动位置。
获取屏幕高度。 https://facebook.github.io/react-native/docs/dimensions.html#content
计算大约。 ListView 的高度 child。

您可以利用这三件事来查明 space 已被特定的 child 占用了多少。

通过获取滚动位置，您可以知道向下滚动了多少像素。将其除以 child 的高度，这样您就可以得到用户滚动了多少 children。

(Scrolled height / Child height) = No. of children scrolled.

最后，onChangeVisibleRows 会告诉您哪些 children 是可见的。祝你好运！

Answer 2

只有当您知道一次有 2-3 行（不多不少）可见时才有效：

onChangeVisibleRows={(visibleRows) => {
    const visibleRowNumbers = Object.keys(visibleRows.s1).map((row) => parseInt(row));
    if (visibleRowNumbers.length === 2) {
        // visible row is visibleRowNumbers[0]
    }
    if (visibleRowNumbers.length === 3) {
        // visible row is visibleRowNumbers[1]
    }
}

请注意，它没有完美映射到最可见的行被认为是可见的。但是，在使用它时，它在滚动时很有意义。在我的特定应用程序中，活动行和非活动行之间存在明显的变化，因此它有助于用户了解发生了什么。

如何确定 scrollview（或 listview）child 在 React Native 中是否大部分在视图中

How to determine whether scrollview (or listview) child is mostly in view in React Native

react-native

react-native-listview

react-native-scrollview