React Native中带有粘性标题的Sectionlist Horizo​​ntal？

Posted 2023-02-16

【中文标题】React Native中带有粘性标题的Sectionlist Horizo​​ntal？

【英文标题】：Sectionlist Horizontal with sticky header in React Native?

【发布时间】：2018-10-20 23:23:06

【问题描述】：

我已经能够在 React Native 中使用 Horizo​​ntal=true 呈现 Sectionlist，但是当我在部分标题方面遇到两个问题时。

标题显示为列表的一部分，而不是在列表上方。 即使使用stickySectionHeadersEnabled=true，标题也不会粘住并随着列表滚动。

预期

实际呈现方式

【参考方案1】：

horizontal 是 ScrollView 的一个 prop。设置 horizontal=true 将渲染 ScrollView 的每个子组件以水平渲染，无论是页眉或页脚还是空组件。如果您需要在“预期”下绘制的布局，则必须为此单独创建View。

如果您将horizontal 设置为true，则使所有内容水平内联是有意义的。如果SectionList 呈现为水平状态，则其部分应水平出现。如果您不在两个部分之间提供部分标题，用户将如何区分两个部分？如果您希望在新部分的顶部有一个部分标题，那是特定于您的，您可能必须编写自己的实现。

【参考方案2】：

这符合预期。 horizontal=true 表示标题也将水平呈现。

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

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

stickyHeaderIndices

(...) 此属性不支持与 horizontal=true 结合使用。

【讨论】：

如果有人需要一种在嵌套滚动视图上设置标题的方法，比如在垂直方向内进行水平滚动。我发现您需要为嵌套滚动视图的位置设置动画才能获得“粘性”行为。