React Native SVG 中 XML 解析时 TSpan 的 inlineSize 属性失效问题分析

问题背景

在 React Native SVG 项目中，开发者发现通过 XML 字符串创建 SVG 图形时，TSpan 元素的 inlineSize 属性无法正常工作，而直接使用 JSX 语法则没有问题。这是一个典型的 XML 解析与 JSX 渲染行为不一致的问题。

问题现象

当开发者使用以下两种方式创建 SVG 文本时：

XML 字符串方式：

let xml = `
    <?xml version="1.0" encoding="UTF-8"?>
    <svg viewBox="0 0 800 505">
      <text x="111" y="110" font-size="40">
        <tspan inline-size="50">hello world world world world</tspan>
      </text>
    </svg>`;

let svg = <SVG.SvgXml xml={xml} />;

JSX 方式：

let svg = 
<SVG.Svg viewBox="0 0 800 505">
  <SVG.Text x="110" y="110" fontSize="40">
    <SVG.TSpan inlineSize="50">hello world world world world</SVG.TSpan>
  </SVG.Text>
</SVG.Svg>;

只有 JSX 方式能够正确应用 inlineSize 属性实现文本换行效果，而 XML 方式则无法实现预期的换行效果。

问题根源

经过分析，问题出在 React Native SVG 的文本提取逻辑中。在解析 XML 时，系统会自动将所有文本子节点包裹在一个新的 TSpan 组件中，但在这个过程中没有正确传递 inlineSize 属性。

核心问题代码位于 extractText.tsx 文件中：

1. getChild 函数将所有文本节点强制转换为 TSpan 组件
2. 转换过程中没有保留原始节点的 inlineSize 属性
3. 导致最终渲染的 TSpan 组件缺少必要的换行控制属性

解决方案

开发者提出了一个有效的修复方案，通过修改 getChild 函数来保留 inlineSize 属性：

function getChild(child: TextChild, inlineSize: NumberProp) {
    return <TSpan inlineSize={inlineSize}>{String(child)}</TSpan>;
}

同时需要修改调用处，确保正确传递 inlineSize 参数。

更优的解决方案

除了上述修复方案外，还可以考虑以下优化方向：

1. 避免重复包裹：检测当前处理的子节点是否已经是 TSpan 组件，如果是则不再额外包裹
2. 属性继承：实现所有属性的自动继承机制，而不仅仅是 inlineSize
3. 类型检查：增强类型系统，确保所有文本相关属性都能被正确处理

总结

这个问题展示了 React Native SVG 在处理 XML 和 JSX 时的行为差异。对于需要精确控制文本布局的开发者，建议：

1. 优先使用 JSX 语法，可以获得更精确的控制
2. 如果必须使用 XML，可以考虑临时应用提供的修复方案
3. 关注项目更新，等待官方修复此问题

理解这类问题的本质有助于开发者更好地使用 SVG 库，并在遇到类似问题时能够快速定位和解决。