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

问题背景

在 React Native 0.74 版本中，当启用新架构（New Architecture）和桥接模式关闭（bridgelessMode ON）时，Android 平台上的 SvgFromUri 组件会出现运行错误。这个问题主要出现在 XML 解析过程中，当尝试对 null 值调用 push 方法时导致应用崩溃。

技术分析

问题的根源在于 react-native-svg 库的 XML 解析逻辑存在潜在缺陷。具体来说，在 xml.tsx 文件及其编译后的版本中，children 变量初始化为 null，但在后续处理中却直接对其调用 push 方法。这种设计在大多数情况下可能不会暴露问题，但在特定环境下（如新架构+桥接模式关闭）就会导致运行时错误。

问题重现条件

1. React Native 0.74 版本
2. Android 平台
3. 新架构（New Architecture）启用
4. 桥接模式关闭（bridgelessMode ON）
5. 使用 SvgFromUri 组件加载远程 SVG 资源

解决方案

通过分析问题，我们可以通过以下修改来修复这个缺陷：

// 修改前
let children = null;

// 修改后
let children = [];

这个修改需要在三个文件中实施：

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

技术原理

这个修复的核心原理是确保 children 变量始终是一个数组，而不是可能为 null。在 JavaScript/TypeScript 中：

• 对 null 调用 push 方法会抛出 TypeError
• 对数组调用 push 方法是安全的
• 空数组作为初始值不会影响后续逻辑

这种防御性编程模式在前端开发中很常见，特别是在处理可能为 null 的集合类型时。

影响范围

这个修复主要影响以下场景：

1. 使用 SvgFromUri 组件加载远程 SVG
2. 在 Jest 测试中涉及 SVG 解析
3. 新架构下的 Android 平台

最佳实践建议

1. 在使用 react-native-svg 时，建议检查您的 TypeScript 配置
2. 对于关键 SVG 资源，考虑预加载或缓存机制
3. 在测试环境中，确保正确模拟网络请求
4. 升级到最新版本的 react-native-svg 以获取修复

总结

这个问题展示了在 React Native 新架构下可能出现的一些边界情况。通过理解底层原理和采取防御性编程策略，我们可以构建更健壮的应用程序。这个特定的修复虽然简单，但解决了在新架构环境下的一个重要兼容性问题。