react-native - FlatList 组件生命周期方法 ScrollToIndex ScrollToEnd 等

Question

我正在使用新的 FlatList component并想利用 ScrollToIndex (或 ScrollToEnd )在生命周期方法中，例如 componentDidMount .

我有一个比方说 100 个项目的数组，我不想在第一个项目而是在开始时开始渲染。让我们说第 50 项。当FlatList一次只显示一个项目，它可以按需要工作，如此处所述:https://github.com/facebook/react-native/issues/13202

componentDidMount() {
  let wait = new Promise((resolve) => setTimeout(resolve, 500));  // Smaller number should work
  wait.then( () => {
    this.refs.flatlist.scrollToIndex({index: 4, animated: true});
  });
}

此代码段使 scrollToIndex运行 后 调用 componentDidMount 的几毫秒.

但是当我使用 FlatList View 包含一个 3x3 网格，我根本无法让它运行。当我使用 scrollToIndex并且索引在指定的 Prop 之外 initialNumToRender , 我只收到一个错误 scrollIndex out of range $ID我无法理解。提供的数据数组包含所有，例如，100 个项目。当我让我们成为 scrollToEnd ，它只会停在中间的某个地方，而不是在最后。对我来说，它看起来像是某种错误，我不知道如何在初始渲染后滚动到 $X 项目的任何其他方式。你能帮助我吗？

我很感激任何形式的帮助或评论。

我在 iOS 和 Android(模拟器和设备)上尝试了 React-Native v0.43.0 和 v0.44.0，它总是一样的。

Answer 1

您是否设置了 getItemLayout FlatList 上的 Prop ？

检查它在 React Native 代码中的内容 scrollToIndex - https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js#L308

不过，这仅在您的项目具有设定高度时才真正起作用。对于高度可变的项目，似乎还没有合适的解决方案。我只能通过设置 initialNumToRender={indexToScrollTo + 1} 使其与可变高度一起工作。然后使用 scrollToOffset而不是 scrollToIndex (将偏移量设置为要滚动到的项目的偏移量)。这有明显的性能问题，如果你有很长的列表或者你的项目有复杂的渲染，这真的不理想。