Fatal编程技术网
  • react-native/
  • React native React本机Android文本组件额外填充

React native React本机Android文本组件额外填充

react-native

React native React本机Android文本组件额外填充,react-native,zeplin,React Native,Zeplin,我想知道为什么我在react native中的文本上有这些奇怪的填充。我尝试了各种方法来获得一个完美的文本，但似乎没有任何效果唯一有效的方法是垂直填充和水平填充，但它太粗糙，不可靠 <Text numberOfLines={1} style={{ backgroundColor: 'red', lineHeight: 92, textAlign: 'center', text

我想知道为什么我在react native中的文本上有这些奇怪的
填充。我尝试了各种方法来获得一个完美的文本，但似乎没有任何效果唯一有效的方法是
垂直填充
和
水平填充
，但它太粗糙，不可靠


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




{this.state.documents}


Zeplin



我的HTC屏幕截图


您可以在样式中添加：


lineHeight: 70,
paddingTop: -6,



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


检查React原生文档以供参考：
尝试将其添加到样式中


includeFontPadding:false



你能更新你的问题来添加更多的信息吗？你想在截图中删除的额外填充物到底在哪里？你使用的是自定义字体吗（我不认为Roboto是默认的）？这种行为是Android还是iOS特有的？我在Android上也遇到过类似的问题，我发现了一种黑客解决方案：
lineheight:，paddingTop:
也有同样的效果。我不知道这是一件事——这将在将来为我省去很多麻烦。谢谢我不确定为什么这不是默认样式。同意-花了数小时试图找出为什么字体在iOS而不是Android上完全对齐。