0

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

大多数屏幕和设备上的情况都很好，但在某些情况下，用户报告加号图标没有完全居中。我有一个假设，它可能涉及用户的可访问性选项，使应用程序中的字体大小超出父视图的大小。无论如何，我可以通过设置fontSize大于lineHeight. 假设这是问题 -

您如何在 a 的视图区域中居中单个字形<Text>（或者<Icon>，因为它源自<Text>），即使fontSize可能比<Text>'slineHeight甚至整体大得多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,
  },
});
4

1 回答 1

0

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

于 2019-04-03T03:58:20.093 回答