我想用React和React Native

[！[在此输入图像描述][1]][1]

我试着用这个包：反应圈进度条

但我无法实现这个

我将与您分享我的完整组件，我希望它能让您对当前状态

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;

  return {
    x: centerX + radius * Math.cos(angleInRadians),
    y: centerY + radius * Math.sin(angleInRadians),
  };
}

function describeArc(x, y, radius, startAngle, endAngle) {
  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);

  var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';

  var d = [
    'M',
    start.x,
    start.y,
    'A',
    radius,
    radius,
    0,
    largeArcFlag,
    0,
    end.x,
    end.y,
  ].join(' ');

  return d;
}

顺晟科技：

普通的SVG中，就像这样。梯度并不完美，但接近..“进度”的长度可以使用stroke-dasharray进行调整。

<代码><；SVG viewbox=“ 00200210 ” width=“ 200 ”>；<；定义>；<；掩码ID=“ M1 ”>；<；圆圈cx=“ 100 ” cy=“ 105 ” R=“ 55 ” fill=“ white ”/>；<；/掩码>；<；LinearGradient ID=“ lg1 ” GradientTransform=“ rotate（0）skewX（-20）skewy（-40）”>；<；stop offset=“ 0 ” stop-color=“ red ”/>；<；stop offset=“ 75%” stop-color=“ orange ”/>；<；/LinearGradient>；<；/defs>；<；image mask=“ URL（#M1）” href=“ https：//i.stack.imgur.com/ptg0j.png ” width=“ 200 ”/>；<；路径路径长度=“ 360 ” D=“ M100 175 A 757501110 ”stroke=“ LightsLateGray ” fill=“ none ” stroke-width=“ 30 ”stroke-linecap=“ round ” stroke-dasharray=“ 270 360 ”stroke-dashoffset=“-45 ”/>；<；路径路径长度=“ 360 ” D=“ M100 175 A 757501110 ”stroke=“ URL（#lg1）” fill=“ none ” stroke-width=“ 15 ”stroke-linecap=“ round ” stroke-dasharray=“ 180 360 ”stroke-dashoffset=“-45 ”/>；<；G transform=“ translate（100 180）” font-size=“ 16 ” font-family=“ sans-serif ” font-weight=“ bold ” text-anchor=“ middle ”>；<；文本>；整体<；/text>；<；text transform=“ translate（020）”>；健康<；/text>；<；/G>；<；/SVG>；