ReactNative实现一个圆环进度条

我们直接看效果，如下图

我们在直接上代码

/**
 * 圆形进度条
 */
import React, {useState, useEffect} from 'react';
import Svg, {
  Circle,
  G,
  LinearGradient,
  Stop,
  Defs,
  Text,
} from 'react-native-svg';
import {View, StyleSheet} from 'react-native';

// 渐变色
const CircleProgress = props => {
  const {progress, durationTime, children, customeSvgSize, customeStrokeWidth} =
    props;
  let svgSize = customeSvgSize ? customeSvgSize : 200; // 画布的宽高
  const halfOfSvgSize = svgSize / 2;
  const strokeWidth = customeStrokeWidth ? customeStrokeWidth : 10; // 圆形进度条宽度
  const radius = (svgSize - strokeWidth) / 2; // 外层半径
  const innerRadius = radius - 6; // 内层半径
  const circumference = 2 * radius * Math.PI; // 总周长
  // 背景色，圆环
  const linearGradientColors = [
    {stop: '0%', color: '#36B5AA'},
    {stop: '50%', color: '#317AF7'},
    {stop: '100%', color: '#3396D2'},
  ];
  const circumferenceWithProgress = circumference * (1 - progress);
  const outerCircleCommonConfig = {
    fill: 'none',
    cx: halfOfSvgSize,
    cy: halfOfSvgSize,
    r: radius,
    strokeLinecap: 'round',
    strokeWidth: strokeWidth,
    strokeDasharray: `${circumference}  ${circumference}`,
  };

  const [count, setCount] = useState(durationTime);
  return (
    
      
      
        {children}
      
    
  );
};
const styles = StyleSheet.create({
  main: {
    flexDirection: 'row',
  },
  pa: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default CircleProgress;

注意：1.需要引入react-native-svg库，因为我们用到的是SVG

           2.另外圆环是使用Circle实现，另外使用到了G，用来旋转，不旋转的话，看下图

旋转-45°之后，在看下图

可以看出来哪里不一样了吧

进度是70%，是下面的样子（记得旋转-90°额）