与标准html相比，使用react-native-svg的Svg图标看起来不一样

Question

我以 svg 格式导出了一个在Figma中设计的图标，并将其复制到我的react-native项目中，如下所示，我为使其适应react-native-svg所做的唯一更改是在

Line

上使用大写字母，并且

Svg

。

import React from 'react';
import { Svg, Line } from 'react-native-svg';

export default {
  PauseSymbol: {
    svg:
      <Svg width="14" height="24" viewBox="0 0 14 24" fill="none">
        <Line x1="2" y1="0" x2="2" y2="24" stroke="#A0978E" stroke-width="4" />
        <Line x1="12" y1="0" x2="12" y2="24" stroke="#A0978E" stroke-width="4" />
      </Svg>
  }
}

问题是改变描边宽度的值没有任何作用。当线条宽度应为 4 时，线条显得非常细。

我尝试在 html 中运行 svg，它看起来不错，但在我的使用 React-native-svg 的 iOS 模拟器上却不行。请参阅此处的 html 和预期输出：http://tpcg.io/_YSCW1A

有什么想法吗？谢谢

Answer 1

正如@enxaneta所说，我必须使用

strokeWidth

而不是

stroke-width

。请参阅本页的常用道具

部分