Inconsistent separator lines
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
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
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 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