React Native 中带有粘性 header 的水平部分列表?

Sectionlist Horizontal with sticky header in React Native?

我已经能够在 React Native 中使用 horizo​​ntal={true} 呈现 Sectionlist,但是当我在 header.

部分遇到两个问题时
  1. header 显示为列表的一部分,而不是在其上方。
  2. 即使使用 stickySectionHeadersEnabled={true},header 也不会随列表一起滚动。

预计

实际显示方式

horizontal是ScrollView的一个prop。设置 horizontal={true} 将水平呈现 ScrollView 的每个 child 组件,无论是 header 还是页脚或空组件。如果您需要像您在 "Expected" 下绘制的布局,则必须为此单独制作 View

如果您将 horizontal 设置为 true,则将所有内容水平 in-line 是有意义的。如果 SectionList 水平呈现,则其部分应水平显示。如果您不在两个部分之间给出 header 部分,用户将如何区分这两个部分?如果你想让一个部分 header 从新部分的顶部开始,那是你特有的,你可能必须编写自己的实现。

这符合预期。 horizontal={true} 意味着 headers 也将被水平渲染。

如果您希望 headers 位于项目上方,您可以通过将 header 部分的宽度设置为 0 来破解它,并在其中放置一个水平 header该元素位于最顶部,因此它覆盖了下一个元素。

根据 ListView documentation,当 horizontal 设置为 true 时,不支持 stickySectionHeadersEnabled 属性。虽然目前在 SectionList 文档中没有这样说,但我认为 SectionList 也是如此。

stickyHeaderIndices

(...) This property is not supported in conjunction with horizontal={true}.