(react-native-svg错误)“尝试注册具有相同名称RNSVGRect的两个视图”

Question

react-native-svg产生错误：“尝试注册两个同名的视图RNSVGRect”

我有react原生项目，我想在其中使用SVG。

我开始使用世博会的项目。我正在使用yarn和npm来添加模块。

当我尝试从react-native-svg导入RNSVGRect时，我收到错误信息：“尝试使用相同的名称注册两个视图

import React from "react";
import Svg from "react-native-svg";

Answer 1

更新：

适用于世博会34、35、36、37

世博会托管应用程序现在要求您使用以下工具安装react-native-svg

expo install react-native-svg

然后按以下方式使用它：

import * as Svg from 'react-native-svg';

下面是一个例子

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';

export default class SvgExample extends React.Component {
  render() {
    return (
      <View style={[StyleSheet.absoluteFill, { alignItems: 'center', justifyContent: 'center' }]}>
        <Svg height="50%" width="50%" viewBox="0 0 100 100">
          <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
          <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />
        </Svg>
      </View>
    );
  }
}

最好始终查看文档以了解正确的安装步骤，以免问题过时。你可以在here博览会上找到更多关于svgs的信息。

以前对旧版世博会的回答

不能将react-native-svg与Expo一起使用，因为它需要链接。Expo已经包含了react-native-svg，所以将其作为依赖项添加，然后再导入它，这会使它变得混乱。

https://docs.expo.io/versions/latest/sdk/svg/

要在expo中使用svg，只需按如下方式导入它

import { Svg } from 'expo'

您应该从package.json和package-lock.json中删除react-native-svg

您可以通过运行npm uninstall —-save react-native-svg来完成此操作

您可以在此处查看有关卸载依赖项的更多信息https://stackoverflow.com/a/13066677/5508175

卸载依赖项后，应执行以下操作：

1. Remove node_modules folder
2. 关闭为expo打开的所有窗口
3. 使用expo start -c

删除package-lock.json

• Run npm i

• Restart expo

Answer 2

在我的例子中，问题如下：

在根文件夹下的我的package.json中有react-native-svg : 12.12.1。

我在尝试使用walletConnect提供程序组件时收到此错误消息。这个库有node_modules/@walletConnect/react-native-dapp/node_modules/package.json。那里面有"react-native-svg": "^9.6.4"

因此，我将根react-native-svg的版本更改为与walletConnect中的版本相同的版本。错误消息已消失。