📌  相关文章
📜  Invariant Violation:scrollToIndex 应该和 getItemLayout 或 onScrollToIndexFailed 一起使用,否则无法知道屏幕外索引的位置或处理失败. (1)

📅  最后修改于: 2023-12-03 15:01:25.740000             🧑  作者: Mango

Invariant Violation: scrollToIndex should be used with getItemLayout or onScrollToIndexFailed, otherwise the position of the index off-screen is unknown, or the failure cannot be handled.

如果你正在使用React Native编写一个列表组件,并且使用了scrollToIndex方法去滚动到指定的项,你可能会遇到如上的错误提示。该错误提示意味着你需要在scrollToIndex方法中传入getItemLayout或onScrollToIndexFailed函数才能确保正确地滚动到指定项。

getItemLayout

getItemLayout方法可以计算出指定项在列表中的准确位置,从而确保滚动到正确的位置。该方法接收两个参数:一个是列表数据源中项的索引,另一个是该项的高度。通过这两个参数,你可以计算出该项在列表中的位置。

下面是一个示例代码片段,展示如何使用getItemLayout来计算位置:

getItemLayout={(data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index })}

在这个示例中,我们假设列表中每一项的高度都是相同的,并将该高度存储在ITEM_HEIGHT变量中。在getItemLayout中,我们通过将ITEM_HEIGHT乘以项的索引来计算offset(即项在列表中的偏移量)。然后,我们将length设置为ITEM_HEIGHT,表示该项的高度。最后,我们将index设置为项的索引,以便React Native知道该项的位置。

onScrollToIndexFailed

scrollToIndex方法的第二个参数是一个可选的回调函数onScrollToIndexFailed,它将在滚动到指定位置失败时被调用。当列表中不存在目标项时,或者无法滚动到该项时,该方法将被触发。onScrollToIndexFailed方法接收一个参数,即想要滚动到的项的索引。

由于scrollToIndex无法确定项在列表中的位置,因此onScrollToIndexFailed可以帮助你处理这些滚动失败的情况。

综上所述

当你使用scrollToIndex方法时,你应该使用getItemLayout或onScrollToIndexFailed方法来确保正确地滚动到指定项。getItemLayout可以帮助你计算出项在列表中的位置,而onScrollToIndexFailed则可以帮助你处理滚动失败的情况。

请注意,在React Native 0.64版本及以上,getItemLayout被称为getItemLayout和getItemCountInViewport,两者都需要返回一个给定项的长度,以及一个代表项在列表内的索引和偏移量的对象。在更新版本之前使用getItemLayout就像在示例中展示的那样就可以了。