Inconsistent separator lines
Dieses Issue hat noch niemand übernommen.
- 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.
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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Ö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