为什么错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：数字

Question

我正在运行这个程序来显示 SVG 图像

import React, { Component } from 'react';
import { View } from 'react-native';
import Expo from './assets/check-mark.svg';
import SVG from 'react-native-svg';

export default class MyApp extends Component {
 render(){
  return (
    <View style={{backgroundColor:"black"}}>
    <Expo width={20}
    height={15} />
    </View>
   );
 }
}

并遇到了这个错误Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

我该如何解决这个问题？或者还有其他更好的方法来使用 React Native 的 SVG 图像吗？

Answer 1

对于 svg 文件，react-native-svg建议使用react-native-svg-transformer。

安装包：

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

将配置添加到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'],
    },
  };
})();

这样你就应该能够渲染你的 SVG 文件了。

Answer 2

1. 检查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'],
    },
  };
})();

2. 停止 Metro 捆绑程序或清除 Metro 捆绑程序缓存

3. 使用再次重建应用程序yarn run ios

Answer 3

在react-native中显示SVG的最佳方法（据我所知，这是最好且简单的方法）是：

首先安装这个SVG包： npm i react-native-svg

第二，

• 下载您需要的 SVG 图像。
• 以文本文件形式打开该 SVG 文件
• 从 SVG 文件复制代码并将其粘贴到以下站点
• https://react-svgr.com/playground/
• 选中网站左侧的 React Native 复选框
• 您将在右侧得到一个代码“JSX OUTPUT”
• 现在，在项目的 asset 文件夹（或您想要保存该 SVG 的任何位置）中，创建一个新的 JS 文件并复制粘贴从“JSX OUTPUT”端获得的代码。
• 保存此文件并将其用作项目中的自定义组件。

PS：无需安装SVG变压器包