FlatList 标头中有多个元素

Question

有没有什么方法可以将元素数组传递给 FlatList 而不使用包装器，以便我以后stickyHeaderIndices={[1]}可以只使第二个元素具有粘性？

我的意图是将非粘性标题与粘性工具栏一起使用并将它们传递给组件。

如果我尝试将 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`.

实现该行为的另一种方法是什么（即）有一个列表，其中只有第二个标题变得粘滞？

我尝试的另一种方法是声明一个带有 3 个孩子的滚动视图：

The non-sticky header
The toolbar
The flatlist itself

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

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

Answer 1

使用带有 1 个 ListHeaderComponent 的节列表和带有粘性标题的 1 个节。我以前成功地做到了这一点。