[SectionList][inverted] SectionList headers are sticky-at-the-top-footers if the list is inverted
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 4
Description
- I have reviewed the documentation
- I have searched existing issues
- I am using the latest React Native version
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:

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:

Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par cloner la reproduction React Native liée et l’exécuter avec react-native run-ios afin d’observer le comportement inversé de SectionList. Examinez le point d’entrée de SectionList et la gestion existante des listes inversées, puis comparez le résultat avec les GIFs attendu et du problème ; c’est terminé lorsque les headers restent en haut de leurs sections au lieu de se comporter comme des footers.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100