как мы можем сделать ListHeaderComponent липким заголовком в SectionList?

Описание

я использую горизонтальную панель вкладок внутри ListHeaderComponent и хочу сделать ListHeaderComponent липким заголовком в SectionList. мы можем сделать stickyheader в flatlist с помощью stickyHeaderIndices={[0]}, но он не работает в SectionList

Реагировать на нативную версию:

React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
      Memory: 38.35 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.15.0 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 6.13.4 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 28, 29
        Build Tools: 28.0.3, 29.0.1, 29.0.2
        System Images: android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5791312
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.6 => 16.8.6
      react-native: 0.59.8 => 0.59.8
    npmGlobalPackages:
      rename-horizon: 1.1.0
      react-native-cli: 2.0.1

Действия по воспроизведению

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

  1. составить список разделов и добавить ListHeaderComponent реквизита
  2. добавьте stickyHeaderIndices={[0]} в список разделов, это не сделает ListHeaderComponent липким заголовком

Ожидаемые результаты

он должен сделать ListHeaderComponent липким заголовком. или альтернативный способ сделать его липким заголовком

foodpanda


react-native expo react-native-flatlist react-native-sectionlist
person Muhammad Numan    schedule 02.08.2020    source источник
comment
Привет, Мухаммед, у меня такая же проблема, как и у тебя. Похоже, что SectionList не хватает реквизита stickyHeaderIndices, доступного в компоненте FlatList. Вы нашли способ заставить его работать?   -  person Ciro Pedrini    schedule 30.08.2020
comment
Привет @Numan, тебе удалось решить проблему?   -  person Nizami    schedule 15.06.2021

Ответы (2)


arrow_upward
0
arrow_downward

Используйте что-то вроде этого.

<View style={{ flex: 1 }}>
  {renderStickyListHeaderComponent()}
  <SectionList
    {...sectionListprops}
    ref={sectionListRef}     
    sections={sectionData}
    stickySectionHeadersEnabled={false}   
  />
</View>
person Surender Nandal    schedule 02.10.2020

arrow_upward
-1
arrow_downward

вы можете использовать renderSectionHeader & stickySectionHeadersEnabled = true

render() {
  return (
    <SectionList
      data={sections}
      renderSectionHeader = {({section:{title}}) => (<YourHeader>)}
      stickySectionHeadersEnabled/>
 )
}
person Aaron    schedule 13.05.2021
comment
Пожалуйста, отформатируйте свой вопрос правильно. - person Jean-François Fabre; 16.05.2021