如何创建 strokeDasharray 循环进度反应原生？答案

【问题标题】：How can I create strokeDasharray circular progress react native?如何创建 strokeDasharray 循环进度反应原生？
【发布时间】：2018-11-29 00:30:31
【问题描述】：

我尝试通过引用 (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

但我没有得到正确的圆圈，有人可以帮我开发圆圈或指向任何进度条组件，在那里我可以获得虚线数组

我需要类似下面的东西

但我越来越喜欢下面

【问题讨论】：

嘿，找到解决办法了吗？
在虚线圆圈中添加溢出：可见（css）
这是否解决了您的问题stackoverflow.com/questions/55455050/…

标签： html css user-interface react-native

【解决方案1】：

您有 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"
/>

【讨论】：