多视图组件在 ScrollView 内滚动时粘在顶部答案

【问题标题】：Multiple view component stick to top on scroll inside ScrollView多视图组件在 ScrollView 内滚动时粘在顶部
【发布时间】：2020-04-25 16:26:23
【问题描述】：

我有一个包含 2 个不同列表部分（listComponent1 和 listComponent2）的页面，在每个列表上方我使用 and 创建了一个自定义标签，并将完整部分保留在 ScrollView 中，现在我有一个要求，如果列表每当我滚动 2 个标签（labelComponent1 和 labelComponent2）时，它们都太长了，即使列表项超出了视口，也应该粘在标题下方的顶部。

我尝试在 ScrollView 组件中添加 stickyHeaderIndices={[1]} 和 showsVerticalScrollIndicator={false} 属性，但还是没有用，不知道是不是我做错了

代码：

  <SafeAreaView>
    <ScrollView alwaysBounceHorizontal={false} horizontal={false} contentContainerStyle={testStyle}>
      {true && <View>
        <labelComponent1 data={test1} />
        <listComponent1 data={testData1} />
        <Spacing />
        <labelComponent2 data={test2} />
        <listComponent2 data={testData2} />
      </View >}
    </ScrollView>
  </SafeAreaView>

【问题讨论】：

不知道您的确切想法，但您是否尝试拆分数据并仅在 SectionList 上使用？ reactnative.dev/docs/sectionlist.html
@Fromwood - 我在两个列表中都使用 Draggable Flatlist，它们还包含一些其他功能，因此希望保持完全独立

标签： javascript html css reactjs react-native

【解决方案1】：

您可以使用stickyHeaderIndices={[0]}，这样第一个孩子就会很粘。但不要将ScrollView 的孩子包裹在一个View 中。它将它们包装到一个组件中，因此 ScrollView 将仅具有子组件。试试这个：

<SafeAreaView>
   {booleanVar && <ScrollView stickyHeaderIndices={[0]} horizontal={false}>
        <labelComponent1 data={test1} />
        <listComponent1 data={testData1} />
        <Spacing />
        <labelComponent2 data={test2} />
        <listComponent2 data={testData2} />
    </ScrollView>}
</SafeAreaView>

【讨论】：