callstack / callstack/react-native-paper
Children of List.Accordion are misaligned when adding a left icon
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### Current behaviour
When using the `` element without an icon, the child text is aligned to the left side of the screen, as expected. However, as soon as I add a left icon to the accordion title, the child text is strangely aligned more towards the right.
### Expected behaviour
I would not expect an icon on the accordion title to affect the children, so the children should perhaps still be left-aligned, or at least aligned to the beginning of the accordion title text.
### How to reproduce?
Code without the icon where the children are aligned correctly:
```
This text is left-aligned correctly
```
Code with the icon where the children are misaligned:
```
}>
This text is not left-aligned correctly
```
Note that I am using the `Text` component from the `react-native-paper` library here.
### Preview
Without an icon (correct alignment):

With an icon (incorrect alignment):

### What have you tried so far?
I'm fairly sure the culprit is:
```
child: {
paddingLeft: 64,
},
```
in `src/components/List/ListAccordion.tsx`. I'm not sure the padding should be 64 here, but I don't know the initial reason this was added or what the fix should necessarily be.
### Your Environment
| software | version
| --------------------- | -------
| ios | 16.4
| react-native | 0.72.3
| react-native-paper | 5.6.0
| node | 20.5.1
| npm | 9.8.0
Thanks for a great library by the way, I love using it.
贡献指南
调研方向
从 src/components/List/ListAccordion.tsx 开始,重点关注子元素的样式及其 paddingLeft: 64px。复现有左侧 List.Icon 和没有左侧 List.Icon 的两个示例,然后检查 accordion 标题和子元素的布局方式。完成的标准是:添加左侧图标后,子元素文本不再意外偏移,同时现有的无图标对齐仍然正确。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- frontend, mobile
- Issue 类型
- 缺陷
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 活跃度
- 停滞
- 描述清晰度
- 描述清楚
- 新手友好度
- 38/100