React Native 分段圆形进度条

问：

我正在尝试使用“react-native-svg”创建一个分段圆形进度条（其中每个段可以有自己的大小）

这是我的代码：

const SMCircle = ({ segments }) => {
    const radius = 100;
    const strokeWidth = 20;
    const gap = 10;
    const totalValue = segments.reduce((total, segment) => total + segment.value, 0);
    const circumference = 2 * Math.PI * radius;


    let dashOffset = 0;
    const circleSegments = segments.map((segment, index) => {
        const dashArray = [
          (segment.value / totalValue) * circumference, gap
        ];
        
        const circle = (
          <Circle
            key={index}
            cx={radius}
            cy={radius}
            r={radius - strokeWidth / 2}
            stroke={segment.color}
            strokeWidth={strokeWidth}
            fill="transparent"
            strokeDasharray={dashArray.join(',')}
            strokeDashoffset={dashOffset}
          />
        );
        
        dashOffset += dashArray[0] + dashArray[1]; // Increment dashOffset
        return circle;
      });
return (
      <View>
        <Svg height={2 * radius} width={2 * radius}>
          {circleSegments}
        </Svg>
      </View>
    );
  };
  

  export default SMCircle;


In App.js I am using the component and following data

const segments = [
    { value: 25, color: 'red' },
    { value: 15, color: 'blue' },
    { value: 30, color: 'green' },
    { value: 10, color: 'yellow' },
    { value: 20, color: 'purple' },
  ];

<SMCircle segments={segments} />

这里是 out put，不知道为什么紫色重复多次而其他片段没有出现。

我使用了'react-native-svg'，找不到任何可以在 React Native 中使用的类似包。