在 React Native 中绘制带有虚线样式的 cured

Draw a cured with style dashed in React Native

我正在尝试画一条曲线,样式为虚线,如下图所示

我在 react-native-svg 中使用组件 Line 但只得到如下所示的结果

如何绘制曲线?非常感谢!

使用 react-native-svg,您可以定义一个 Path 组件来表示您的曲线。例如:

const SvgComponent = (props) => (
  <Svg
    viewBox="0 0 429 135"
    fill="none"
    {...props}
  >
    <Path
      d="M9 7c157.135 213.709 340.14 89.046 412 0"
      stroke="#000"
      strokeWidth={20}
      strokeDasharray="12 6"
    />
  </Svg>
)

在这种情况下,我使用 Figma. Then, I exported the SVG and subsequently imported it into the SVGR Playround 创建了一条曲线,将其转换为上面的代码(尽管我做了一个小修改并将 widthheight 更改为 viewbox 道具).

您可以在 this Snack

看到它的实际效果