callstack / callstack/react-native-paper
iOS SegmentedButtons display color issue with decreased/increased phone text size
- 主要语言
- 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:
Implementation:
```
```
### Preview
The button on the left has a band of lighter color, whether selected or not:
### 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