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

【问题标题】：FlatList Component Life Cycle Methods ScrollToIndex ScrollToEnd etcFlatList 组件生命周期方法 ScrollToIndex ScrollToEnd 等
【发布时间】：2017-05-08 19:54:47
【问题描述】：

我正在使用新的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});
  });
}

这个 sn-p 使scrollToIndex 在调用componentDidMount 几毫秒之后运行。

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

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

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

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

您是否在 FlatList 上设置了 getItemLayout 属性？

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

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

【讨论】：

【解决方案2】：

查看 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 道具是否从您的给定数据中获取正确的计数。默认情况下，prop 使用 data.length，因此如果您还没有指定，您可能需要自己指定。

【讨论】：