Expo React Native带中心文本环形进度条创建及重叠问题解决

你的问题出在只绘制了进度环，缺少底层的背景圆环，而且没必要用useState存储周长（直接通过props计算即可）。以下是修复后的完整实现，包含中心文本和正确的双层圆环结构：

import React from 'react';
import { View } from 'react-native';
import Svg, { Circle, Text as SvgText } from 'react-native-svg';

interface ProgressCircleProps {
  radius: number;
  strokeWidth: number;
  progress: number; // 0到1之间的值
  color: string;
  bgColor?: string; // 背景环颜色，可选
}

const ProgressCircle: React.FC<ProgressCircleProps> = ({
  radius,
  strokeWidth,
  progress,
  color,
  bgColor = '#e0e0e0',
}) => {
  // 直接计算周长，无需useState/useEffect
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference * (1 - Math.max(0, Math.min(1, progress))); // 限制进度在0-1之间
  const progressPercentage = `${Math.round(progress * 100)}%`;

  return (
    <View style={{ aspectRatio: 1, width: radius * 2 }}>
      <Svg width={radius * 2} height={radius * 2}>
        {/* 底层背景圆环 */}
        <Circle
          stroke={bgColor}
          fill="transparent"
          strokeWidth={strokeWidth}
          cx={radius}
          cy={radius}
          r={radius - strokeWidth / 2}
        />
        {/* 上层进度圆环 */}
        <Circle
          stroke={color}
          fill="transparent"
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          strokeDashoffset={strokeDashoffset}
          strokeLinecap="round" // 可选：让进度条两端圆润
          cx={radius}
          cy={radius}
          r={radius - strokeWidth / 2}
        />
        {/* 中心文本 */}
        <SvgText
          x="50%"
          y="50%"
          textAnchor="middle"
          alignmentBaseline="middle"
          fontSize={radius / 2.5}
          fill="#333"
          fontWeight="bold"
        >
          {progressPercentage}
        </SvgText>
      </Svg>
    </View>
  );
};

export default ProgressCircle;

关键修改说明 #

• 添加背景圆环：用灰色背景环作为底层，进度环叠在上方，这样即使进度为0也能看到环形框架
• 移除冗余状态：直接通过radius计算周长，不需要useState和useEffect，简化逻辑
• 进度值边界限制：用Math.max(0, Math.min(1, progress))确保进度不会超出0-1范围，避免异常显示
• 可选优化：添加strokeLinecap="round"让进度条两端更圆润，贴合截图效果

使用示例 #

在你的页面中调用组件：

import ProgressCircle from './ProgressCircle';

// 示例用法
<ProgressCircle
  radius={80}
  strokeWidth={10}
  progress={0.65} // 65%进度
  color="#4CAF50"
/>

内容的提问来源于stack exchange，提问作者JP Ventura