多視圖組件在 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>