callstack / callstack/react-native-paper

Children of List.Accordion are misaligned when adding a left icon

未关闭
#4,030 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug List
主要语言
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):
![image](https://github.com/callstack/react-native-paper/assets/12899179/31432019-438f-4b2b-86d1-86c23e8ca2d2)

With an icon (incorrect alignment):
![image](https://github.com/callstack/react-native-paper/assets/12899179/f2fee53e-1209-400b-a679-c9c75c28e5b0)

### 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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。