添加新元素和重新渲染时，ListHeaderComponent 中的 React Native FlatList 闪烁/跳跃

Question

我使用 ListHeaderComponent 创建了一个垂直的 FlatList A，并在它上面创建了另一个垂直的 FlatList B。

FlatList A 使用 onEndReached 属性加载新元素并将新元素添加到列表 A。

FlatList A 的 ListHeaderComponent 中的 FlatList B 正在使用 ListFooterComponent 显示“添加更多”按钮以加载并向列表 B 添加新元素。

使用“添加更多”按钮将一些新元素添加到列表 B 时工作正常，但在向列表 B 添加超过 8 个新元素后，屏幕在重新渲染和添加其他新元素时开始闪烁和跳跃。

<FlatList
      contentContainerStyle={styles.list}
      keyExtractor={keyExtractor}
      data={data}
      renderItem={renderItem}
      ListHeaderComponent={renderHeader}
      onEndReachedThreshold={0.9}
      onEndReached={() => {
        if (page < totalPages) {
          getMoreItems();
        }
      }}
      ListFooterComponent={renderFooter}
      getItemLayout={getItemLayout}
    />



const renderHeader = () => (
      <FlatList
        contentContainerStyle={styles.list}
        keyExtractor={keyExtractor}
        data={otherData}
        renderItem={renderItem}
        ListHeaderComponent={renderOtherHeader}
        ListFooterComponent={renderOtherFooter}
        getItemLayout={getItemLayout}
      />
  );

  renderOtherFooter = () => (
          <TouchableOpacity onPress={getMoreOtherData}>
            <Text>See More</Text>
          </TouchableOpacity>
  );

const getMoreOtherData = () => {
    let newItems = getNewItems();
    ..
    setOtherData([...otherData, ...newItems]);
    ..
}

我尝试添加 getItemLayout 属性，它有所改进，但行为保持不变。

您有解决此问题的任何想法吗？谢谢！

编辑

我通过使用 SectionList 而不是 FlatList 解决了这个问题。