React Native SVG 在 Android 新架构下的 XML 解析问题分析与解决方案

在 React Native 0.74 版本中，当启用新架构（New Architecture）和桥接模式关闭（bridgelessMode ON）时，Android 平台上的 SvgFromUri 组件会出现运行错误。这个问题主要影响 XML 解析过程，导致组件无法正常渲染 SVG 图像。

问题现象

开发者在使用 SvgFromUri 组件加载远程 SVG 资源时，控制台会抛出"children.push 无法执行"的错误。错误根源在于 xml.tsx 文件中的解析逻辑存在问题 - 变量 children 初始化为 null，后续却尝试对其调用 push 方法。

技术分析

这个问题特别值得关注，因为它只在特定条件下出现：

1. 仅影响 Android 平台
2. 需要 React Native 0.74 版本
3. 必须启用新架构和桥接模式关闭
4. 不影响 iOS 平台（通常桥接模式在 iOS 上默认关闭）

深入分析问题代码，发现 XML 解析器的初始状态设置存在缺陷。在解析 SVG XML 结构时，解析器期望 children 变量是一个数组，但实际上它被初始化为 null。这种类型不匹配在严格模式下会导致运行时错误。

解决方案

经过技术验证，可以通过以下修改修复此问题：

1. 将 children 变量初始化为空数组而非 null
2. 确保类型一致性，避免后续操作中出现类型错误

这个修改需要同步应用到三个关键文件：

• 源代码文件（src/xml.tsx）
• CommonJS 编译输出（lib/commonjs/xml.js）
• ES Module 编译输出（lib/module/xml.js）

影响范围

该问题会影响以下使用场景：

• 使用 SvgFromUri 组件加载远程 SVG 资源
• 在测试环境中对 SVG 相关组件进行快照测试
• 任何依赖 XML 解析功能的 SVG 操作

最佳实践建议

对于使用 React Native SVG 库的开发者，建议：

1. 在升级到 RN 0.74 时特别注意桥接模式的影响
2. 对 SVG 相关功能进行全面测试，特别是在启用新架构时
3. 考虑在测试用例中添加对远程资源加载的验证
4. 关注类型安全，避免类似的 null 引用问题

这个问题也提醒我们，在架构升级和模式切换时，需要特别注意边界条件的测试，确保核心功能的稳定性。