Компонент с несколькими представлениями вверху при прокрутке внутри ScrollView

Question

У меня есть страница, которая состоит из 2 различных разделов списка (listComponent1 и listComponent2), и над каждым списком я создал собственную метку, используя и, и сохранил полный раздел в ScrollView, теперь у меня есть требование, где, если списки слишком длинные, когда я прокручиваю, 2 метки (labelComponent1 и labelComponent2) должны придерживаться верхнего нижнего заголовка, даже если элементы списка выходят из области просмотра.

Я попытался добавить stickyHeaderIndices = {[1]} и showsVerticalScrollIndicator = {false} свойства внутри компонента ScrollView, но он не работает, не уверен, что я делаю какую-то ошибку

Код:

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