如何在文本边界框中居中超大字体?

问题描述 投票:0回答:1

我正在尝试创建一个带有加号图标的简单浮动操作栏按钮,并且在某些边缘情况下难以将“加号”真正居中。我只是在<Text>中使用'\ uFF0B',但是试图切换到react-native-vector-icons,却发现他们也使用字体而不是图像来支持<Icon>实例,并且我的问题似乎仍然存在。

在大多数屏幕和设备上都很好用,但在某些情况下,用户报告加号图标不是完全居中。我有一个假设,它可能涉及用户的可访问性选项,增加应用程序中超出父视图大小的字体大小。无论如何,我可以通过将fontSize设置为大于lineHeight来重现像人们与我分享的屏幕截图。假设这是问题 -

你如何将单个字形置于<Text>(或<Icon>,因为它来自<Text>)的视图范围内,即使fontSize可能比<Text>lineHeight甚至整个height大得多?

在下面的示例中,“+”字体大小正好是行高的两倍,因此加号在视图区域的右上角居中显示,就像它期望在一个112dp的框中一样x 112dp;但是我想把它放在56dp x 56dp盒子的中心位置,而是用加号的手臂裁剪。没有样式属性的组合似乎影响它,而只是控制<Icon>在其父级内的位置。

目前:

一般:

screenshot of what it looks like on most screens

对于超大字体:

screenshot of the poorly centered glyph

码:

<View style={s.fabStyle}>
  <TouchableOpacity onPress={()=>{this.onPlus()}}>
    <Icon name="plus" style={s.fabText} /> 
  </TouchableOpacity>
</View>

...

const s = StyleSheet.create({
  fabStyle: {
    position: 'absolute',
    right: 16,
    bottom: 16,
    borderRadius: 28,
    width: 56,
    height: 56,
    backgroundColor: styleConstants.color.primary,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
  },
  fabText: {
    position: 'relative',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    fontSize: 112,
    color: '#fff',
    textAlign: 'center',
    lineHeight: 56,
    width: 56,
    height: 56,
  },
});
react-native react-native-vector-icons
1个回答
0
投票

这不是问题本身的答案,它仍然存在,但是对于潜在问题的答案,以防有人通过谷歌搜索来到这里与类似的问题。在我的情况下,确实存在可访问性设置导致字体比设计大的情况,从而触发上述情况。虽然我仍然不知道如何在这种情况下充分集中文本,但在我的情况下,可以通过确保allowFontScaling=false保存文本的相关视图来避免这个问题。

© www.soinside.com 2019 - 2024. All rights reserved.