callstack / callstack/react-native-paper

iOS SegmentedButtons display color issue with decreased/increased phone text size

未关闭
#4,805 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### Current behaviour

When changing the text size of my phone, certain text sizes cause a break in the background and border color in the SegmentedButtons component.

### Expected behaviour

Consistent SegmentedButtons styling no matter which phone text size is being used.

### How to reproduce?

On iOS: Settings > Accessibility > Display & Text Size > Larger Text
Select one of the following text size options:
Image
Image

Implementation:
```

```

### Preview

The button on the left has a band of lighter color, whether selected or not:

Image

Image

### What have you tried so far?

Explicitly setting a button labelStyle with the following (does not work for all phone text size options):
```
const { fontScale } = Dimensions.get('window');

const baseFontSize = theme.fonts.bodyMedium.fontSize || 14;
```
```
labelStyle: [styles.buttonLabel, { fontSize: Math.max(12, baseFontSize * fontScale) }]
```
```
const styles = StyleSheet.create({
buttonLabel: {
includeFontPadding: true,
textAlign: 'center',
textAlignVertical: 'center',
},
});
```

### Your Environment

| software | version
| --------------------- | -------
| ios | 18.6.2
| react-native | ^0.75.5
| react-native-paper | ^5.14.5

贡献指南

打开贡献指南

调研方向

首先,使用列出的 Larger Text 设置在 iOS 上复现 SegmentedButtons 示例,然后检查 SegmentedButtons 的样式和 labelStyle 的行为。当选中和未选中按钮的背景色和边框颜色在受影响的各种文本大小下保持一致,并且相关检查或测试通过时,即视为完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
ios, react-native, typescript
领域
frontend, mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
55/100

把新 issue 发到你的邮箱

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