React Native Android 文本组件额外填充答案

【问题标题】：React Native Android Text Component extra paddingReact Native Android 文本组件额外填充
【发布时间】：2017-01-07 19:57:44
【问题描述】：

我想知道为什么在我的 react-native 文本中出现这些奇怪的 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 屏幕截图

【问题讨论】：

您能否更新您的问题以添加更多信息？您要在屏幕截图中删除的额外填充到底在哪里？
您是否使用自定义字体（我认为 Roboto 不是默认字体）？此行为是否特定于 Android 或 iOS？我在 Android 上遇到了类似的问题，在那里我找到了一种 hacky 解决方案：stackoverflow.com/questions/41570343

标签： react-native zeplin

【解决方案1】：

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

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

【讨论】：

我不知道这是一件事 - 这将在未来为我省去很多麻烦。谢谢！

【解决方案2】：

尝试将其添加到样式中

includeFontPadding:false

【讨论】：

我不知道为什么这不是默认样式。
同意——花了几个小时试图弄清楚为什么字体在 iOS 而不是 Android 上完美对齐。
完美解决方案！！！