React Native SVG 使用不受支持的 JSX 命名空间标签。如何将 throwIfNamespace 设置为 false？

Question

我正在尝试使用 kristerkari/react-native-svg-transformer，但在运行地铁后出现以下错误：

error: assets/menu.svg: /user/Projects/mobile/assets/menu.svg: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
  2 | import Svg, { Path } from "react-native-svg";
  3 | 
> 4 | const SvgComponent = props => <Svg overflow="visible" preserveAspectRatio="none" viewBox="0 0 24 24" width={24} height={24} {...props}><Path xmlns:default="http://www.w3.org/2000/svg" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" vectorEffect="non-scaling-stroke" fill="#949494" /></Svg>;
    |                                                                                                                                              ^^^^^^^^^^^^^
  5 | 
  6 | export default SvgComponent;

我按照说明操作了。我正在使用 React 16.13.1 和 RN 0.63.2。我试图在 babel.config.js 中设置标志，如下所示：

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    { throwIfNamespace: false },
  ],
};

但它不起作用。知道如何绕过警告或替代方法能够在没有运行时间转换的情况下导入 SVG 文件吗？

Answer 1

我过去遇到过同样的问题，不确定它是否是正确的解决方案，但删除 svg 文件中的 xmlns 对我有用

Answer 2

你可以使用同一个包中的路径 Svg 而不是 transformer svg 但你必须 link 与 React native。

react-native link react-native-svg-transformer

React Native SVG 使用不受支持的 JSX 命名空间标签。如何将 throwIfNamespace 设置为 false？

React Native SVG is using unsupported JSX namespace tags. How to set throwIfNamespace to false?

react-native

svg

react-native-svg