React Native Android端字体加粗时Text组件高度适配问题求助

方案1：关闭Android字体额外内边距 #

React Native的Android Text组件默认开启includeFontPadding，会为文字添加额外上下内边距。当系统字体加粗后，这个内边距的计算可能出现偏差，导致组件高度无法容纳实际文字高度。关闭该属性可以让组件高度更贴合文字实际尺寸：

<View style={{ width: "100%", flexDirection: "row" }}>
  <Text style={{ width: 163 }} includeFontPadding={false}>Number</Text>
  <Text style={{ flex: 1 }} includeFontPadding={false}>012-3456-7890</Text>
</View>

方案2：显式设置行高 #

系统字体加粗后，文字的实际高度会增加，默认的行高可能不足以容纳。显式设置lineHeight可以确保文字拥有足够的垂直显示空间，避免内容被裁切：

<View style={{ width: "100%", flexDirection: "row" }}>
  <Text style={{ width: 163, lineHeight: 24 }}>Number</Text>
  <Text style={{ flex: 1, lineHeight: 24, paddingVertical: 2 }}>012-3456-7890</Text>
</View>

注：paddingVertical可根据实际字体大小微调，进一步避免文字边缘被裁切。

方案3：允许内容自适应换行 #

针对长度不固定的内容，允许Text组件自动换行并配合父容器的flex布局，可以从根本上避免单行空间不足导致的内容隐藏问题：

<View style={{ width: "100%", flexDirection: "row", flexWrap: "wrap" }}>
  <Text style={{ width: 163, flexShrink: 0 }}>Number</Text>
  <Text style={{ flex: 1, flexWrap: "wrap" }}>012-3456-7890</Text>
</View>

flexShrink: 0确保左侧标签不会被挤压变形，右侧内容自动换行后高度会自适应扩展，完整展示所有内容。

方案4：针对Android平台做专属适配 #

若上述方案单独使用效果不佳，可以结合Platform API针对Android平台同时调整多个样式属性，精准适配系统字体变化：

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  label: {
    width: 163,
    ...Platform.select({
      android: {
        includeFontPadding: false,
        lineHeight: 26
      }
    })
  },
  content: {
    flex: 1,
    ...Platform.select({
      android: {
        includeFontPadding: false,
        lineHeight: 26
      }
    })
  }
});

// 组件使用
<View style={{ width: "100%", flexDirection: "row" }}>
  <Text style={styles.label}>Number</Text>
  <Text style={styles.content}>012-3456-7890</Text>
</View>

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