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

Question

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

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

如何绘制曲线？非常感谢！

Answer 1

使用 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 创建了一条曲线，将其转换为上面的代码（尽管我做了一个小修改并将 width 和 height 更改为 viewbox 道具).

您可以在 this Snack

看到它的实际效果

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

Draw a cured with style dashed in React Native

react-native

user-interface

react-native-svg