我如何创建strokeDasharray循环进度本机反应？

Question

我尝试通过使用以下代码引用（https://github.com/stssoftware/react-native-svg-circular-progress）来构建带有虚线数组的圆形进度条

>   <Circle cx={half} cy={half} r={half} fill={blankColor}
> stroke="#0074d9"
>                 strokeWidth="10"
>                 strokeDasharray="8, 3"/>

完整代码：

>   <Circle cx={half} cy={half} r={half} fill={blankColor}
> stroke="#0074d9"
>                 strokeWidth="10"
>                 strokeDasharray="8, 3"/>

但是我没有得到正确的圆圈，有人可以帮助我建立圆圈或指向任何进度条组件，让我可以绘制虚线数组

我需要下面的东西

但我越来越像下面

Answer 1

你有strokeWidth10个。笔画围绕着类似的东西生长，意味着5线之前和5线之后。

在您的代码中，您将 的半径设置circle为 SVGwidth和的一半height。表示5笔划线之后增长的笔划宽度将刚好溢出 SVG。

要修复它，请根据您的情况设置radiusas或。width/2 - strikeWidth/2100/2 - 10/2half - 5

最后一句话，这应该可以解决您的问题：

<Circle 
  cx={half}
  cy={half}
  r={half-5}
  fill={blankColor}
  stroke="#0074d9"
  strokeWidth="10"
  strokeDasharray="8, 3"
/>