如何移除React Native Text组件底部空白？

你遇到的问题是字体自带的行高预留空间导致Text组件底部有空白，直接设置lineHeight等于fontSize会因为字体自身的绘制范围截断顶部文字，以下是几种可行的解决方法：

方法一：使用负padding抵消底部空白 #

通过给显示数值的Text组件添加负的paddingBottom，直接抵消其底部的空白区域，数值需要根据你的字体和字号微调：

<Text style={{ 
  fontSize: 56, 
  fontFamily: 'TitilliumWeb_600SemiBold', 
  textAlign: 'center', 
  backgroundColor: 'purple',
  paddingBottom: -8 // 可根据实际显示效果调整
}}>14.45366</Text>
<Text style={{ fontSize: 16, fontFamily: 'TitilliumWeb_400Regular', textAlign: 'center', color: '#979797' }}>Current Balance</Text>

方法二：React Native环境下结合textAlignVertical调整 #

如果是在React Native中，可以通过textAlignVertical: 'top'让文字对齐容器顶部，再配合缩小的lineHeight，避免顶部截断的同时减少底部空白：

<Text style={{ 
  fontSize: 56, 
  fontFamily: 'TitilliumWeb_600SemiBold', 
  textAlign: 'center', 
  backgroundColor: 'purple',
  lineHeight: 56,
  textAlignVertical: 'top'
}}>14.45366</Text>

方法三：基于字体度量值精准设置lineHeight #

不同字体的上下预留空间不同，你可以用字体工具（如FontForge）查看TitilliumWeb_600SemiBold的实际 ascent（顶部到基线距离）和 descent（基线到底部距离），计算出不会截断文字的最小lineHeight。比如如果该字体的ascent占字号的92%，可以将lineHeight设为56 * 1.05左右，既缩小容器高度，又保证顶部文字完整。

你提供的原始代码： #

<Text style={{ fontSize: 56, fontFamily: 'TitilliumWeb_600SemiBold', textAlign: 'center', backgroundColor: 'purple' }}>14.45366</Text>
<Text style={{ fontSize: 16, fontFamily: 'TitilliumWeb_400Regular', textAlign: 'center', color: '#979797' }}>Current Balance</Text>

你尝试过的截断代码： #

<Text style={{ fontSize: 56, fontFamily: 'TitilliumWeb_600SemiBold', textAlign: 'center', backgroundColor: 'purple', lineHeight: 56 }}>14.45366</Text>

内容的提问来源于stack exchange，提问作者Jake Mulhern