如何在文本的边框内居中超大字体？

Question

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

在大多数屏幕和设备上情况都不错，但是在某些情况下，用户报告加号图标的居中位置不是很好。我有一个假设，即它可能涉及用户的辅助功能选项，从而使应用程序中的字体大小超出父视图的大小。无论如何，我可以通过将fontSize设置为大于lineHeight来重现人们正在与我共享的屏幕快照。假设是问题-

即使在<Text>可能是<Icon>的情况下，如何在<Text>（或fontSize的视图区域内居中显示单个字形，因为它源自<Text>）。比lineHeight的{​​{1}}大得多，甚至比整体height大得多？

在下面的示例中，“ +”字体大小恰好是行高的两倍，因此加号位于视图区域右上角的中央点击打点，就像它原本希望放在盒子中一样那是112dp x 112dp；但是我想让它居中于56dp x 56dp盒子的死点中心，并剪裁加号的手臂。似乎没有样式属性的组合会影响它，而只是控制<Icon>在其父对象中的位置。

当前：

通常：

对于超大字体：

代码：

<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,
  },
});

Answer 1

这并不是对仍然存在的问题的解答，而是对潜在问题的解答，以防万一有人通过Google搜索到达类似问题的情况。以我为例，可访问性设置确实导致字体比设计的要大，从而触发了上述情况。尽管在这种情况下我仍然不知道如何充分地使文本居中，但在我的情况下，可以通过确保allowFontScaling=false保留相关视图的文本来解决此问题。