Inconsistent separator lines
未关闭
还没有人认领这个 Issue。
Issue: Author Provided Repro
Needs: Author Feedback
Newer Patch Available
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
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
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 Android 上的 FlatList ItemSeparatorComponent 行为开始,使用提供的 Expo Snack 复现示例,其中包含 StyleSheet.hairlineWidth 和一个 1 像素的分隔线。比较分隔线在整个列表中渲染出的厚度,并确定一致的输出应呈现什么样子;该 issue 未指定实现文件或测试。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- android, react-native
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100