React Native嵌套Text组件样式异常：小行高组件前置无渲染

问题重现 #

在React Native中用styled-components实现同一文本块内不同文字的差异化样式，当把小字号、小行高的HeaderText6作为外层Text的第一个子元素时，页面完全没有内容渲染；但将大行高的HeaderText2放在首位时则正常。相关代码如下：

正常运行的代码：

<Text>
  <HeaderText2>Hello</HeaderText2>
  <HeaderText6>From</HeaderText6>
  <HeaderText2>The Other Side</HeaderText2>
</Text>

无内容渲染的代码：

<Text>
  <HeaderText6>Hello</HeaderText6>
  <HeaderText2>From</HeaderText2>
  <HeaderText6>The Other Side</HeaderText6>
</Text>

样式定义：

const HeaderText2 = styled.Text`
    font-size: 30px;
    line-height: 39px;
`;

const HeaderText6 = styled.Text`
    font-size: 12px;
    line-height: 16px;
`;

移除行高属性后恢复正常，但需要保留大行高样式。

问题原因 #

React Native的外层Text组件会继承第一个子元素的行高作为自身默认行高，当第一个子元素的行高（16px）远小于后续子元素的行高（39px）时，外层Text的容器高度会被限制在16px左右，后续大字体、大行高的内容会完全溢出容器的可视范围，导致看起来没有内容渲染。

解决办法 #

1. 给外层Text设置固定的最大行高 #

直接给外层Text设置所有子元素中最大的行高（这里是39px），确保容器足够容纳所有内容：

// 用styled-components定义外层容器
const OuterText = styled.Text`
  line-height: 39px;
`;

// 使用时
<OuterText>
  <HeaderText6>Hello</HeaderText6>
  <HeaderText2>From</HeaderText2>
  <HeaderText6>The Other Side</HeaderText6>
</OuterText>

2. 关闭Android字体内边距（可选） #

如果是Android端出现的问题，可额外添加include-font-padding: false，避免系统默认的字体内边距加剧内容裁剪：

const OuterText = styled.Text`
  line-height: 39px;
  include-font-padding: false;
`;

3. 统一子元素行高继承策略 #

给小行高的HeaderText6设置行高为auto或继承外层行高，这样不会影响外层容器的高度计算：

const HeaderText6 = styled.Text`
    font-size: 12px;
    line-height: auto; // 或者 line-height: inherit;
`;

这种方式需要注意小字体的排版是否符合需求，如果需要小字体保持原有行高，不建议使用。

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