使用SVG图标时出现Element type is invalid错误，请求协助解决

问题原因 #

你直接将SVG文件当作React组件导入并渲染，但在React Native环境中，默认导入SVG文件得到的是数字类型的资源标识，而非可渲染的React组件，这就触发了错误提示里的「got: number」问题。

解决方案 #

方案1：使用react-native-svg + react-native-svg-transformer（推荐） #

这是最通用的方案，支持直接将SVG作为组件导入使用：

1. 安装依赖

# npm
npm install react-native-svg react-native-svg-transformer
# 或者 yarn
yarn add react-native-svg react-native-svg-transformer

2. 配置Metro打包器（修改metro.config.js）

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

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

3. 重启Metro服务后，你的原有代码就可以正常运行了：

import GmailIcon from '../../assets/SVG/Gmail.svg';

const DetailsList = () => {
  return (
    <View style={styles.detailContainer}>
      <View style={styles.listContainer}>
        <GmailIcon width={moderateScale(20)} height={moderateScale(20)} />
      </View>
    </View>
  );
};

方案2：将SVG转换为React Native组件 #

如果不想配置依赖，可以手动将SVG代码转换为react-native-svg兼容的组件：

1. 打开你的SVG文件，复制里面的代码
2. 将代码转换为react-native-svg格式的组件（把<svg>换成<Svg>，<path>换成<Path>，并导入对应的组件），保存为GmailIcon.tsx文件：

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

const GmailIcon = ({ width, height }) => (
  <Svg width={width} height={height} viewBox="0 0 24 24">
    {/* 替换为你SVG里的实际Path内容 */}
    <Path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#000" />
  </Svg>
);

export default GmailIcon;

3. 导入该组件使用即可

方案3：用Image组件渲染SVG #

如果不需要修改SVG的颜色等属性，也可以直接把SVG当作图片资源使用：

const DetailsList = () => {
  return (
    <View style={styles.detailContainer}>
      <View style={styles.listContainer}>
        <Image
          source={require('../../assets/SVG/Gmail.svg')}
          style={{
            width: moderateScale(20),
            height: moderateScale(20),
          }}
        />
      </View>
    </View>
  );
};

内容的提问来源于stack exchange，提问作者Atul Singour