如何創建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"/>

完整代碼：

import React from 'react'
import {View, StyleSheet} from 'react-native'
import Svg, {Path, Circle} from 'react-native-svg'

const styles = StyleSheet.create({
    textView: {
        position: 'absolute',
        top: 0, left: 0, bottom: 0, right: 0,
        justifyContent: 'center',
        alignItems: 'center'
    }
})

function generateArc(percentage, radius){
    if (percentage === 100) percentage = 99.999
    const a = percentage*2*Math.PI/100 // angle (in radian) depends on percentage
    const r = radius // radius of the circle
    var rx = r,
        ry = r,
        xAxisRotation = 0,
        largeArcFlag = 1,
        sweepFlag = 1,
        x = r + r*Math.sin(a),
        y = r - r*Math.cos(a)
    if (percentage <= 50){
        largeArcFlag = 0;
    }else{
        largeArcFlag = 1
    }

    return `A${rx} ${ry} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${x} ${y}`
}

const CircularProgress = ({
    percentage = 40,
    blankColor = "#eaeaea",
    donutColor = "#43cdcf",
    fillColor = "white",
    progressWidth = 35,
    size = 100,
    children
}) => {
    let half = size / 2;
    return <View style={{width: size, height: size}}>
        <Svg width={size} height={size}>
            <Circle cx={half} cy={half} r={half} fill={blankColor} stroke="#0074d9"
                strokeWidth="10"
                strokeDasharray="8, 3"/>
            <Path
                d={`M${half} ${half} L${half} 0 ${generateArc(percentage, half)} Z`}
                fill={donutColor}
            />
            {<Circle cx={half} cy={half} r={progressWidth} fill={fillColor}
                    />}
        </Svg>
        <View style={styles.textView}>
            {children}
        </View>
    </View>
}
export default CircularProgress

但我沒有得到正確的圓圈，有人可以幫助我開發圓圈或指向任何進度條組件，在那里我可以獲得虛線的筆划陣列

我需要像下面這樣的東西

但我越來越像下面

Answer 1

您的strokeWidth為 10。筆觸圍繞strokeWidth增長，意味着該行前5行，行后5行。

在您的代碼中，您將circle的半徑設置為 SVG width和height一半。 意味着在描邊線之后增長的描邊寬度的5將溢出 SVG。

要修復它，請在您的情況下將radius設置為width/2 - strikeWidth/2 100/2 - 10/2或half - 5 。

最后，這應該可以解決您的問題：

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