react / react/react-native

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

Abierto
#18,945 56 comentarios 18 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Bug Component: SectionList Resolution: PR Submitted
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Empieza clonando la reproducción enlazada de React Native y ejecutándola con react-native run-ios para observar el comportamiento invertido de SectionList. Inspecciona el punto de entrada de SectionList y el manejo existente de listas invertidas, y después compara el resultado con los GIFs esperado y del problema; se considera terminado cuando los headers permanecen en la parte superior de sus secciones en lugar de comportarse como footers.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.