当前位置：首页 > article >正文

ReactNative实现一个圆环进度条

article 2025/3/15 3:13:20

我们直接看效果，如下图

我们在直接上代码

/**
 * 圆形进度条
 */
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: &

查看全文

http://www.kler.cn/a/227118.html