React Native中如何实现内联格式化文本的对齐？

问题分析 #

在React Native中直接将多个<Text>组件放在flexDirection: row的<View>里时，每个<Text>会被当作独立的flex容器项，导致文本无法跨组件自动换行——当某段文本过长时，会整段跳到下一行，而非按内容自然换行，排版效果不符合预期。你之前拆分单词的方法虽能解决问题，但代码冗余且不够优雅。

最优解决方案：嵌套<Text>组件 #

React Native的<Text>组件支持内部嵌套，父<Text>负责整体文本流的排版（如padding、字体基础样式），子<Text>单独设置粗体、斜体等样式。这种方式下，所有文本会被当作连续的流处理，自动实现正确的换行和对齐，无需拆分单词。

示例代码 #

<Text style={{ padding: 10 }}>
  Normal text normal text normal text norm
  <Text style={{ fontWeight: "bold" }}> bold text</Text>
  normal text normal text normal text normal text
</Text>

为什么嵌套可行？ #

React Native的<Text>是专门优化的文本容器，它会将内部所有嵌套的<Text>节点合并为一个连续的文本流，而非独立的布局单元。这样排版引擎会基于整个文本内容计算换行位置，完全符合普通富文本的排版逻辑。

复杂场景扩展 #

如果需要处理更复杂的富文本（如包含HTML标签的内容），可以直接解析内容后生成嵌套的<Text>结构，但对于简单的粗体、斜体需求，原生嵌套<Text>已经是最简洁高效的方案。

内容的提问来源于stack exchange，提问作者Paul Wellner Bou