使用字体系列时文本的底部空白

Question

当我将Text组件的字体系列应用于下图时，我会遇到问题

如您所见，我的文本无法居中对齐（红色区域是我的默认Text组件，没有任何边距或填充）。

我认为此问题来自我的字体（TradeGothicLTStd-BdCn2），因为当我更改字体时，我不再看到此问题。

这是该组件的样式

 dropdownCurrentText: {
    fontFamily: Fonts.type.TradeGothicLTStdBold,
    fontSize: 14,
    justifyContent: 'center',
    textAlign: 'center',
    color: Colors.black,
    letterSpacing: 0.2
  },

在保留上述字体的情况下，是否有任何解决建议？任何回应将不胜感激。

P.S这不是在Android平台上发生，只有iOS

Answer 1

您可以尝试将此属性添加到特定元素：vertical-align: middle

Answer 2

如果不想使用边距/边距值，可以将文本框定义为行内块元素，为其指定相对位置，然后将顶部/底部值调整为中心如您所愿：

div {
  align-items: center;
  border: 1px solid gray;
  display: flex;
  height: 40px;
  width: 200px;
}

span {
  background: red;
  display: inline-block;
  position: relative;
  top: 2px;
  left: 10px;
}

<div>
  <span>SELECT</span>
</div>