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

Question

我正在使用新的 FlatList component 并希望在 componentDidMount.

等生命周期方法中使用 ScrollToIndex（或 ScrollToEnd）

我有一个包含 100 个项目的数组，我不想从第一个项目开始渲染，而是从头开始渲染。让我们说在第 50 个项目。当 FlatList 一次只显示一个项目时，它会根据需要使用此处所述的一些 hack 来工作：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 时，视图包含 3x3 网格，我根本无法做到运行。当我使用 scrollToIndex 并且索引在指定的道具 initialNumToRender 之外时，我只会得到一个我无法理解的错误 scrollIndex out of range $ID。提供的数据数组包含所有项目，例如 100 个项目。当我使用 scrollToEnd 时，它只在中间某处停止，而不是在末尾。对我来说，它看起来像是某种错误，我不知道如何在初始渲染后滚动到 $X 项目。你能帮帮我吗？

非常感谢任何形式的帮助或评论。

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

Answer 1

查看 VirtualizedList.js，scrollIndex out of range $ID 在这些情况下会出现警告：

scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number}) {
    const {data, horizontal, getItemCount} = this.props;
    const {animated, index, viewPosition} = params;
    if (!(index >= 0 && index < getItemCount(data))) {
      console.warn('scrollToIndex out of range ' + index);
      return;
    } ....

也许检查你的 getItemCount 道具是否从你给定的数据中得到正确的计数。默认情况下，该道具使用 data.length，因此如果您还没有指定，您可能需要自己指定。

Answer 2

您是否在 FlatList 上设置 getItemLayout 道具？

检查 scrollToIndex - https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js#L308

的 React Native 代码中的内容

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

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

FlatList Component Life Cycle Methods ScrollToIndex ScrollToEnd etc

react-native

react-native-flatlist