FlatList 中有多个元素 header

Question

有什么方法可以将元素数组传递给 FlatList，而无需包装器，这样我以后就可以使用 stickyHeaderIndices={[1]} 只使第二个元素成为粘性的？

我的意图是将非粘性 header 和粘性工具栏一起传递给组件。

如果我尝试将 renderHeader 作为函数传递给 ListHeaderComponent，例如

  renderHeader = () => {
    const { toolbar, header } = this.props;
    const arr = [header(), toolbar()];
    return arr;
  };

我得到一个

Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `VirtualizedList`.

实现该行为的替代方法是什么（即，有一个列表，其中只有第二个 header 变粘？

我尝试的另一种方法是用 3 children 声明滚动视图：

The non-sticky header
The toolbar
The flatlist itself

同时在 ScrollView 上设置 stickyHeaderIndices={[1]}。

通过这种方式，我获得了所需的视觉滚动行为（即工具栏变得粘滞）。但是，通过这种方法，我遇到了外部滚动视图和内部平面列表之间的冲突事件问题，所以我也不知道这是否是一种有效的方法。

Answer 1

使用带有 1 个 ListHeaderComponent 和 1 个带有粘性 header 的节的节列表。我以前成功过。

FlatList 中有多个元素 header

Have multiple elements in a FlatList header

react-native

react-native-flatlist