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。笔画围绕着类似的方向增长，意味着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"
/>

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

1 个答案: