React本机SVG正在使用不支持的JSX命名空间标记。如何将throwIfNamespace设置为false？

Question

我正在尝试使用kristerkari/react本机-svg-变压器，但运行地铁后会出现以下错误：

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由相同的包白化变压器svg，但您必须链接到反应本机。

react-native link react-native-svg-transformer

Answer 3

错误是因为没有使用camel case标记。请注意，这里使用的是jsx (react)。因此，请进行以下更改。

1. 将sketch:type转化为sketchType
2. 将xmlns:xlink转化为xmlnsXlink
3. 将xlink:href转化为xlinkHref
4. 将xmlns:default转化为xmlnsDefault
5. 并最终将所有css类转换为camelCase。