React Native SVG 组件渲染错误分析与解决方案

问题现象

在使用 React Native 开发过程中，开发者可能会遇到一个常见的错误提示："Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number"。这个错误通常发生在尝试渲染 SVG 组件时，特别是在 React Native 项目中集成 react-native-svg 库时。

错误原因分析

这个错误的核心在于 React 无法正确识别传递给组件的类型。具体到 SVG 组件的使用场景，主要有以下几个潜在原因：

1. 导入方式不正确：早期版本的 react-native-svg 需要特定的导入语法，错误的导入方式会导致组件无法被正确识别。

2. 属性类型不匹配：SVG 组件对 width 和 height 等属性的类型有严格要求，传递数字类型而非字符串类型可能导致问题。

3. 构建缓存问题：特别是在添加新库或修改配置后，没有清理构建缓存可能导致组件无法正确加载。

4. SVG 转换器配置缺失：使用 SVG 文件作为组件时，缺少必要的转换器配置会导致文件无法被正确解析。

解决方案

正确的组件导入方式

确保使用正确的导入语法：

import { Svg, Circle, Ellipse } from 'react-native-svg';

属性传递规范

对于 SVG 组件的尺寸属性，推荐使用字符串形式传递：

<Logo width="200" height="200" />

虽然在某些情况下数字形式也能工作，但字符串形式具有更好的兼容性。

构建缓存清理

在修改配置或添加新库后，务必清理构建缓存：

Android 项目：

cd android
./gradlew clean

iOS 项目：

cd ios
xcodebuild clean

SVG 转换器配置

使用 SVG 文件作为组件时，需要正确配置 react-native-svg-transformer：

1. 安装必要依赖：

yarn add react-native-svg react-native-svg-transformer

2. 配置 metro.config.js：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

3. 添加 TypeScript 类型声明（如使用 TypeScript）：

declare module '*.svg' {
  import React from 'react';
  import { SvgProps } from 'react-native-svg';
  const content: React.FC<SvgProps>;
  export default content;
}

最佳实践建议

1. 版本兼容性：确保 react-native-svg 与 React Native 版本兼容，最新版本通常能解决许多历史问题。

2. 统一属性格式：在项目中统一使用字符串形式传递 SVG 属性，避免混用数字和字符串导致的不可预期行为。

3. 组件封装：对于频繁使用的 SVG 图标，建议创建统一的封装组件，便于维护和属性管理。

4. 构建流程：在修改 SVG 相关配置后，养成清理构建缓存的习惯，可以避免许多奇怪的问题。

5. 类型检查：TypeScript 用户应确保类型声明文件正确配置，以获得更好的开发体验和错误提示。

通过遵循这些实践方案，开发者可以有效地避免 SVG 组件渲染错误，并建立更健壮的 React Native 图形渲染解决方案。