react / react/react-native

[SectionList][inverted] SectionList headers are sticky-at-the-top-footers if the list is inverted

Aperta
#18,945 56 commenti 18 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Bug Component: SectionList Resolution: PR Submitted
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.6.0
Yarn: 1.5.1
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.3 => 0.55.3

Steps to Reproduce

Clone this repository and run it via react-native run-ios.
Observe the section separators are in wrong (randomly?) places.

Expected Behavior

The section list headers should be in the top of the section instead of the bottom like section footers do with an inverted list (but they aren't sticky).

Expected gif:

kapture 2018-04-19 at 13 46 22

Actual Behavior

The section headers are footers instead of headers. They are sticky because of https://github.com/facebook/react-native/pull/17762 but still footers, not headers.

Sample code:

export default class App extends React.Component {
  render() {
    return (
      <View style={s.container}>
        <SectionList
          inverted
          sections={mock.sections}
          maxToRenderPerBatch={10}
          initialNumToRender={10}
          style={{ flex: 1 }}
          keyExtractor={(item) => item.messageId}
          renderSectionHeader={sectionProps => (
            <SectionHeader
              {...sectionProps}
            />
          )}
          renderItem={({ item }) => (
            <ListItem
              item={item}
            />
          )}
          ItemSeparatorComponent={ItemSeparator}
        />
        />
      </View>
    );
  }
}
Problem Gif:

kapture 2018-04-19 at 13 43 42

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia clonando la riproduzione collegata di React Native ed eseguendola con react-native run-ios per osservare il comportamento invertito di SectionList. Esamina il punto di ingresso di SectionList e la gestione esistente delle liste invertite, quindi confronta il risultato con le GIF previste e del problema; il lavoro è completato quando gli header rimangono in cima alle rispettive sezioni invece di comportarsi come footer.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react-native
Ambito
mobile
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.