React Native中如何缩小Text组件背景色高度，实现多行高亮文本的行间间距

问题核心原因 #

React Native 中 Text 组件的backgroundColor属性渲染规则为：背景色会铺满当前行对应的完整行框范围（行框高度由lineHeight决定），并非仅包裹文字字形本身。当高亮文本跨多行折行时，每一行的背景色会沿整行高度铺满，相邻行的背景没有自然空隙，最终连为整体。
之前尝试给Text设置10px margin、10px padding没有效果的原因是：这类边距是作用在整个Text组件的最外层块级范围，不会渗透到每一行折行的行框内部，只能调整整个高亮块和周边非高亮内容的距离，无法在高亮文本的每一行之间留出空隙；过大的边距还会撑大行高范围，反而让背景连块的问题更明显。

可行解决方案 #

方案1：同色文字阴影替代背景色实现高亮 #

核心逻辑：文字阴影是沿文字字形轮廓渲染的，不会铺满整行的行高范围；多行折行时每一行的阴影效果都是独立渲染的，天然会匹配原文本的行高产生行间视觉空隙，从根源避免背景连块的问题。
可直接复用的示例代码：

<Text style={{
  fontSize: 16,
  color: '#222222',
  // 用和高亮背景同色的阴影替代原有backgroundColor
  textShadowColor: '#F8C5C5',
  textShadowOffset: {width: 0, height: 0},
  textShadowRadius: 5, // 数值大小控制高亮块和文字字形的内边距
  paddingHorizontal: 3 // 避免阴影和文字左右边缘贴得过近
}}>
  这里是多行排布的高亮文本，哪怕折为数行长文本，每一行的高亮背景块都是独立的，不会出现之前连为整体的问题
</Text>

• 方案优势：不需要手动校准行高，和原生文本排版的行间距完全匹配，视觉效果最接近预期的逐行高亮状态
• 注意事项：阴影的模糊值不要设置过大，否则会导致高亮边缘发虚

方案2：调整行高搭配透明纵向内边距适配原生背景色 #

如果场景限制必须使用backgroundColor实现高亮，可以通过压缩背景在行框内的覆盖范围，留出行间空隙：

1. 给高亮Text设置比字号高20%-30%的lineHeight，预留出行间的空白范围
2. 给Text设置上下方向的透明内边距，把背景色的渲染范围从整行高度压缩到字形附近，让行框内多余的高度成为无背景的空隙
   可直接复用的示例代码：

<Text style={{
  fontSize: 16,
  lineHeight: 23, // 比字号高出7px，预留行间空隙
  color: '#222222',
  backgroundColor: '#F8C5C5',
  paddingVertical: 3, // 上下各3px透明内边距，压缩背景的纵向覆盖范围
  paddingHorizontal: 4
}}>
  多行排布的高亮文本
</Text>

• 注意事项：paddingVertical的数值不能超过lineHeight和字号差值的一半，否则背景范围会超出预留的空隙，重新出现相邻行背景连块的问题

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