React原生Android文本组件额外填充

Question

我想知道为什么在反应原生的文本中得到这些奇怪的padding。我尝试了所有的东西，只是得到一个完美的文本，但似乎没有任何工作，唯一有效的是paddingVertical和paddingHorizontal，但它太过于hacky而且不可靠。

<Text numberOfLines={1} 
      style={{
            backgroundColor: 'red', 
            lineHeight: 92, 
            textAlign: 'center', 
            textAlignVertical: 'center', 
            padding: 0, 
            margin: 0, 
            fontSize: 92,  
            color: '#2d76ff', 
            fontFamily: 'Roboto-Regular', 
            includeFontPadding: false}}>
      {this.state.documents}
</Text>

Zeplin

来自我的HTC的屏幕截图

Answer 1

由于遇到同样的问题，我偶然发现了这个问题。文本组件具有一个称为includeFontPadding的道具。您可以将其设置为false以删除多余的填充。

检查React Native文档以供参考：https://facebook.github.io/react-native/docs/text-style-props#includefontpadding

Answer 2

尝试将其添加到样式中

includeFontPadding:false

Answer 3

您可以添加到样式：

lineHeight: 70,
paddingTop: -6,

这就是结果：。