React Native 中带有粘性 header 的水平部分列表?
Sectionlist Horizontal with sticky header in React Native?
我已经能够在 React Native 中使用 horizontal={true} 呈现 Sectionlist,但是当我在 header.
部分遇到两个问题时
- header 显示为列表的一部分,而不是在其上方。
- 即使使用 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}
.
我已经能够在 React Native 中使用 horizontal={true} 呈现 Sectionlist,但是当我在 header.
部分遇到两个问题时- header 显示为列表的一部分,而不是在其上方。
- 即使使用 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}
.