React Native — stickyHeaderIndices не работает для SectionList

Я пытаюсь сделать так, чтобы какой-то заголовок располагался в верхней части списка SectionList, но похоже, что stickyHeaderIndices={[0]} работает не так, как ожидалось. Это список разделов:

     <SectionList
          ref={(ref) => (productsSectionListRef = ref)}
          stickyHeaderIndices={[0]}
          ListHeaderComponent={_renderHeader()}
          contentContainerStyle={[style.products_container]}
          sections={productListSections}
          renderItem={({item, section}: {item: string; section: any}) => {
            return _renderProduct(item);
          }}
          stickySectionHeadersEnabled={false}
          renderSectionHeader={({section}) => {
            return _renderProductHeader(section.title);
          }}
          keyExtractor={(item) => item}
          showsVerticalScrollIndicator={false}
          viewabilityConfig={{
            itemVisiblePercentThreshold: 50,
          }}
          onViewableItemsChanged={_onViewableItemsChanged}
          bounces={false}
          scrollEventThrottle={4}
          initialNumToRender={productListSections.length}
          scrollEnabled={scrollEnabled}
          removeClippedSubviews={true}/>

Я попытался поместить заголовок за пределы списка разделов, но заголовок стал больше, и я не могу прокручивать этот компонент заголовка.


person Ioana B    schedule 05.10.2020    source источник


Ответы (1)


stickyHeaderIndices={[0]} 

сделает первый элемент в плоском списке липким вверху, если вы измените на

stickyHeaderIndices={[5]} 

4-й элемент будет оставаться сверху после того, как элемент достигнет вершины при прокрутке

пункт в

ListHeaderComponent={_renderHeader()}

будет в верхней части списка, но не будет действовать как элемент внутри списка, его независимый

person Khadam Ikhwanus    schedule 05.10.2020