react / react/react-native

Inconsistent separator lines

Ouverte
#46,968 4 commentaires 2 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Issue: Author Provided Repro Needs: Author Feedback Newer Patch Available
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

Description

The thickness of the separator lines in FlatList is inconsistent on android. Here's another issue related to the separator: GitHub Issue.

Captura de Tela 2024-10-10 às 20 08 25
Steps to reproduce

Add a separator to a FlatList with hairlineWidth or 1.

React Native Version

0.73.6

Affected Platforms

Runtime - Android

Output of npx react-native info
Expo 51 from snack.
Stacktrace or Logs
import React from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
} from 'react-native';

const DATA = [...Array(100).keys()]

const Separator = () => <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: '#000' }} />

const Item = ({title}) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({item}) => <Item title={item} />}
        ItemSeparatorComponent={Separator}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: 'white',
    padding: 12,
  },
  title: {
    fontSize: 20,
  },
});

export default App;
Reproducer

https://snack.expo.dev/@diegolmello/f6c27a

Screenshots and Videos
Captura de Tela 2024-10-10 às 20 08 25

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par le comportement de FlatList ItemSeparatorComponent sur Android, en utilisant le reproducteur Expo Snack fourni avec StyleSheet.hairlineWidth et un séparateur d’un pixel. Comparez l’épaisseur rendue du séparateur dans toute la liste et déterminez à quoi devrait ressembler une sortie cohérente ; l’issue ne nomme aucun fichier d’implémentation ni test.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
android, react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.