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在{/ 1}}调用几毫秒之后运行。

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

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

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

Answer 1

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

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

的React Native代码中的内容

只有当你的物品具有设定的高度时，这才会真正起作用。似乎对于具有可变高度的物品没有合适的解决方案。通过设置initialNumToRender={indexToScrollTo + 1}然后使用scrollToOffset而不是scrollToIndex（将偏移量设置为您要滚动的项目的偏移量），我设法通过变量高度设置此功能至）。这有明显的性能问题，如果您有长列表或您的项目具有复杂的渲染，那么它实际上并不理想。

Answer 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，因此如果您还没有，则可能需要指定自己的。

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

2 个答案: