React Native Android 文本组件额外填充

Question

我想知道为什么在我的反应本机文本中出现这些奇怪的 padding。我尝试了所有方法来获得完美的文本，但似乎没有任何效果唯一起作用的是 paddingVertical 和 paddingHorizontal，但它太老套了而且不可靠。

<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>

齐普林

来自我的 HTC 的屏幕截图

Answer 1

我偶然发现了这个问题，因为我也遇到了同样的问题。文本组件有一个名为 includeFontPadding 的属性。您可以将其设置为 false 以删除额外的填充。

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

Answer 2

尝试将其添加到样式中

includeFontPadding:false

React Native Android 文本组件额外填充

React Native Android Text Component extra padding

react-native

zeplin