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

问题背景

在 React Native 0.74 版本中，当启用新架构（New Architecture）和桥接模式关闭（bridgelessMode ON）时，Android 平台上的 SvgFromUri 组件会出现解析错误。这个问题主要影响从远程 URI 加载 SVG 图像的功能，导致应用崩溃。

错误现象

开发者在使用 SvgFromUri 组件加载远程 SVG 资源时，会遇到以下错误：

TypeError: Cannot read property 'push' of null

错误发生在 XML 解析过程中，具体位置是 xml.tsx 文件中的 parse 函数。当尝试向 children 数组添加元素时，由于 children 变量初始化为 null 而非空数组，导致无法调用 push 方法。

技术分析

根本原因

1. 变量初始化问题：在 xml.tsx 文件中，children 变量初始化为 null，但在后续逻辑中直接对其调用 push 方法，这在 TypeScript 类型检查下本应报错。

2. 新架构的影响：问题仅在启用新架构和桥接模式关闭时出现，表明这与 React Native 的 JavaScript 引擎执行环境变化有关。新架构下可能对变量初始化和类型检查更为严格。

3. 测试环境差异：Jest 测试同样会失败，因为相同的代码逻辑存在于编译后的 commonjs 和 module 版本中。

影响范围

• 平台：Android（iOS 未验证）
• React Native 版本：0.74+
• 架构：New Architecture + bridgelessMode ON
• 组件：SvgFromUri

解决方案

临时修复方案

开发者可以通过直接修改 node_modules 中的文件来解决此问题：

1. 修改 xml.tsx 文件，将 children 初始化为空数组：

let children: XmlAST[] = [];

2. 同样修改编译后的文件：

// lib/commonjs/xml.js 和 lib/module/xml.js
let children = [];

长期解决方案

建议库维护者在下一个版本中修复此问题，包括：

1. 修正 TypeScript 类型定义，确保 children 正确初始化为数组
2. 更新编译脚本，确保生成的 JavaScript 代码保持一致
3. 添加针对新架构和桥接模式的测试用例

最佳实践建议

1. 类型安全：在 TypeScript 项目中，应始终为变量提供正确的初始值，避免 null 初始化后直接使用方法调用。

2. 环境兼容性：开发跨平台组件时，需要考虑不同架构和模式下的行为差异，特别是 React Native 新架构带来的变化。

3. 错误处理：对于网络资源加载组件，应添加完善的错误处理机制，包括加载状态、失败回调和默认图像等。

总结

这个问题揭示了在 React Native 新架构下类型安全和变量初始化的重要性。虽然可以通过简单修改解决，但也提醒开发者在跨平台开发中需要更加注意环境差异和类型安全。对于使用 react-native-svg 库的开发者，建议关注官方更新或应用临时修复方案以确保应用稳定性。