平面列表-ScrollToIndex应该与getItemLayout或onScrollToIndexFailed结合使用

Question

setTimeout(() => { this.myFlatList.scrollToIndex({animated:true , index: 100}) }, 100);  

如果我在平面列表中使用scrolltoindex返回此错误；

scrollToIndex应该与getItemLayout或onScrollToIndexFailed结合使用

我尝试使用getItemLayout，但我的平面列表项目具有不同的高度，我该如何解决？

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

Answer 1

我有一个类似的错误，水平列表显示图像，按下时应在轮播中显示所选图像。

我FlatList通过使用initialScrollIndex. 我也曾经onScrollToIndexFailed在initialScrollIndex无法显示正确图像的时候滚动到正确的图像。

这是通过将超时设置为 500 毫秒然后滚动到所选图像来完成的。

完整示例（仅包含有关此错误的道具）：

const flatList = useRef<FlatList>(null);

...

<FlatList
  ref={flatList}
  initialScrollIndex={props.activeIndex}  
  onScrollToIndexFailed={info => {
    const wait = new Promise(resolve => setTimeout(resolve, 500));
    wait.then(() => {
      flatList.current?.scrollToIndex({ index: info.index, animated: true });
    });
  }}
/>

Answer 2

所提出的解决方案不适用于我的情况。

我的理解是，FlatList只列出列表中的几个下一个项目（initialNumToRender），并且只能滚动到这些项目，但不能滚动到更远的项目。

如果列表项都具有相同的高度，我有另一个解决方案，即使在长列表上也适用。即滚动到特定坐标：

export default MyComponent = props => {
  const flatListRef = useRef()

  return (
    <FlatList
      ref={flatListRef}
      ...
      onScrollToIndexFailed={({
        index,
        averageItemLength,
      }) => {
        // Layout doesn't know the exact location of the requested element.
        // Falling back to calculating the destination manually
        flatListRef.current?.scrollToOffset({
          offset: index * averageItemLength,
          animated: true,
        });
      }}
    />
  );
};

Answer 3

我有一个类似的问题，并通过改变解决了它initialNumToRender在FlatList。

这个道具定义了要渲染的组件数量。如果滚动到尚未呈现的索引，则会显示错误。

React NativeinitialNumToRender默认是10，我改成initialNumToRender={60}. 如果您的列表更大或更小，您需要更改此数字。