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

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 我反应-native-svg

其次，

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

PS：无需安装SVG变压器包

Answer 4

安装所有必需的组件后我遇到了同样的问题 包裹。但在停止 Metro Bunler 并重建项目之后 我的问题自动解决了。

Answer 5

为了博览会

1_ 安装 React Native svg 转换器 npm i --save-dev react-native-svg-transformer 和 npm 我反应-native-svg

2_ 在 metro.config.js 文件

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

3_ 用于打字稿 使用此声明创建 declarations.d.ts 文件

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

4_关于更改

填充属性： 创建文件 .svgrrc 并在其中

{
  "replaceAttrValues": {
    "#000": "{props.fill}"
  }
}

然后确保 SVG 文件填充属性中的路径标记是十六进制代码（在本例中为 #000）

5_ 终止终端并运行 npx expo start --clear

这里是 expo 和 React 本机应用程序的配置

https://github.com/kristerkari/react-native-svg-transformer#installation-and-configuration