react-native - 使用可变项目大小滚动到 FlatList 中某个索引的有效方法

Question

我在 react-native 中向 FlatList 上的某些索引功能添加滚动/跳转时遇到问题。我的 FlatList 项目的大小(高度)各不相同，这使我无法实现 getItemLayout因为这要求我对 FlatList 项目大小有先验知识，因此我不能使用 scrollToIndex (这需要实现 getItemLayout)。

我的解决方案是使用 onLayout 在渲染时获取每个项目的大小并用它们的索引映射它们。然后我可以使用每个项目大小来获取它们的偏移量并使用 scrollToOffset跳转到给定的项目(通过在下面的代码中使用 scrollToItem 函数)。这里的问题是，在渲染该项目之前，我无法跳转到该项目。
我的临时解决方案是调整 initialNumberToRender接近数据数量并设置windowSize props 尽可能高，以便渲染所有项目(即使用户没有向下滚动)。

getOffsetByIndex = (index) => {
    let offset = 0;
    for (let i = 0; i < index; i++) {
      const elementLayout = this.layoutMap[index];
      if (elementLayout && elementLayout.height) {
        offset += this.layoutMap[i].height;
      }
    }
    return offset;
};

scrollToItem = (index) => {
  const offset = this.getOffsetByIndex(index);
  this.flatListRef.scrollToOffset(offset);
};

addToLayoutMap = (layout, index) => {
  this.layoutMap[index] = layout;
};

render(){
  return(
    <FlatList
      ref={this.flatListRef}
      data={this.state.data}
      renderItem={() => <View onLayout={this.addToLayoutMap}> <SomeComponent/> </View>}
      initialNumToRender={this.state.data.length / 5}
      windowSize={this.state.data.length}
    />
  );
}

此解决方案适用于少量数据，但是当数据很大(包含约 300 行)时，需要很长时间才能呈现所有项目大小，例如防止用户直接跳转到最后一个项目。

有什么有效的方法可以做到吗？
此外，渲染所有行非常消耗内存，并否定了使用 FlatList 的好处。

Answer 1

您可以根据滚动方向动态拆分数据。如果滚动上升，则将数据添加到您的状态，相反方向则相同。然后使用 onScrollToIndexFailed像这样:

<FlatList
  ref={this.flatListRef}
  data={this.state.data}
  renderItem={() => <View> <SomeComponent /> </View>}
  initialNumToRender={this.state.data.length / 5}
  onEndReached={(e) => {
    // Append data
  }}
  onScroll={(e) => {
    if (e.nativeEvent.contentOffset.y == 0) {
      // Prepend data
    }
  }}
  onScrollToIndexFailed={(error) => {
    this.flatListRef.scrollToOffset({ offset: error.averageItemLength * error.index, animated: true });
    setTimeout(() => {
      if (this.state.data.length !== 0 && this.flatListRef !== null) {
        this.flatListRef.scrollToIndex({ index: error.index, animated: true });
      }
    }, 100);
  }}
/>   

您可以解决此问题。这对我有用，花了我很多时间来完成这项工作:))