时间戳

首页 > 解决方案 > React Native - stickyHeaderIndices 不适用于 SectionList

reactjs - 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}/>

我试图将标题放在节列表之外，但标题更大，我无法在该标题组件内滚动。

标签： reactjsreact-nativereact-native-sectionlistreact-native-stylesheet

解决方案

stickyHeaderIndices={[0]}

如果您更改为，将使平面列表中的第一项粘在顶部

stickyHeaderIndices={[5]}

滚动时项目到达顶部后，第 4 项将粘在顶部

项目在

ListHeaderComponent={_renderHeader()}

将在平面列表的顶部，但不作为平面列表中的项目，它是独立的

推荐阅读