ReactNative实现一个圆环进度条

本文介绍了如何使用React和ReactNativeSVG库创建一个可定制的圆形进度条组件,包括渐变色效果和动态进度显示。组件展示了如何设置动画和使用G元素进行旋转以适应不同的视觉需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们直接看效果,如下图

我们在直接上代码

/**
 * 圆形进度条
 */
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 (
    <View>
      <Svg width={svgSize} height={svgSize}>
        <Defs>
          <LinearGradient x1="100%" y1="100%" x2="0%" y2="0%" id="gradient">
            {linearGradientColors.map((item, index) => (
              <Stop key={index} offset={item.stop} stopColor={item.color} />
            ))}
          </LinearGradient>
        </Defs>
        <G rotation={-90} origin={`${halfOfSvgSize}, ${halfOfSvgSize}`}>
          <Circle stroke="#D2D2D2" {...outerCircleCommonConfig} />
          <Circle
            stroke="url(#gradient)"
            fill="none"
            {...outerCircleCommonConfig}
            strokeDashoffset={circumferenceWithProgress}
          />
        </G>
      </Svg>
      <View
        style={[{width: svgSize, height: svgSize}, styles.pa, styles.center]}>
        {children}
      </View>
    </View>
  );
};
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°额)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xvzhengyang

感谢,励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值