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

Question

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

我尝试在 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>

Answer 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>