react / react/react-native

Inconsistent separator lines

Offen
#46,968 4 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Issue: Author Provided Repro Needs: Author Feedback Newer Patch Available
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem Verhalten von FlatList ItemSeparatorComponent unter Android und verwende den bereitgestellten Expo Snack-Reproduzierer mit StyleSheet.hairlineWidth und einem 1-Pixel-Trenner. Vergleiche die gerenderte Dicke des Trenners über die gesamte Liste hinweg und bestimme, wie eine konsistente Ausgabe aussehen sollte; das Issue nennt keine Implementierungsdateien oder Tests.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
android, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.