如何在React Native中创建半圆多进度条

由于react-native-svg-charts的ProgressCircle仅支持单进度展示，要实现多进度分段的半圆效果，最直接的方式是叠加多个ProgressCircle组件，通过控制每个组件的起始角度、进度值和颜色来实现分段显示。

核心实现思路 #

1. 给每个进度段的ProgressCircle设置position: absolute，让它们叠加在同一容器内
2. 计算每段的起始角度：半圆总弧度为Math.PI（从-Math.PI*0.5到Math.PI*0.5），每段起始角度 = 初始起始角度 + 总弧度 × 之前所有进度的累计值
3. 每个ProgressCircle的progress值为当前分段占整个半圆的比例

代码示例 #

静态分段实现

import { View } from 'react-native';
import { ProgressCircle } from 'react-native-svg-charts';

// 假设hp是你的响应式高度工具
export default function MultiProgressSemicircle() {
  return (
    <View style={{ marginTop: hp('5%'), alignItems: 'center' }}>
      {/* 第一段：0-30% */}
      <ProgressCircle
        style={{ height: 320, position: 'absolute' }}
        progress={0.3}
        progressColor={'rgb(134, 65, 244)'}
        startAngle={-Math.PI * 0.5}
        endAngle={Math.PI * 0.5}
        strokeWidth={30}
        cornerRadius={0}
      />
      {/* 第二段：30%-60% */}
      <ProgressCircle
        style={{ height: 320, position: 'absolute' }}
        progress={0.3}
        progressColor={'rgb(65, 194, 244)'}
        startAngle={-Math.PI * 0.5 + Math.PI * 0.3}
        endAngle={Math.PI * 0.5}
        strokeWidth={30}
        cornerRadius={0}
      />
      {/* 第三段：60%-80% */}
      <ProgressCircle
        style={{ height: 320, position: 'absolute' }}
        progress={0.2}
        progressColor={'rgb(244, 165, 65)'}
        startAngle={-Math.PI * 0.5 + Math.PI * 0.6}
        endAngle={Math.PI * 0.5}
        strokeWidth={30}
        cornerRadius={0}
      />
    </View>
  );
}

动态数组渲染（更灵活）

如果进度段数量或数值需要动态调整，可以用数组循环渲染：

import { View } from 'react-native';
import { ProgressCircle } from 'react-native-svg-charts';

export default function MultiProgressSemicircle() {
  // 定义进度段数据：value为占半圆的比例，color为对应颜色
  const progressSegments = [
    { value: 0.3, color: 'rgb(134, 65, 244)' },
    { value: 0.3, color: 'rgb(65, 194, 244)' },
    { value: 0.2, color: 'rgb(244, 165, 65)' },
  ];

  let cumulativeProgress = 0;

  return (
    <View style={{ marginTop: hp('5%'), alignItems: 'center' }}>
      {progressSegments.map((segment, index) => {
        const startAngle = -Math.PI * 0.5 + Math.PI * cumulativeProgress;
        cumulativeProgress += segment.value;
        return (
          <ProgressCircle
            key={index}
            style={{ height: 320, position: 'absolute' }}
            progress={segment.value}
            progressColor={segment.color}
            startAngle={startAngle}
            endAngle={Math.PI * 0.5}
            strokeWidth={30}
            cornerRadius={0}
          />
        );
      })}
    </View>
  );
}

注意事项 #

• 所有进度段的value总和不要超过1，否则会超出半圆的范围
• 若需要圆角效果，可将cornerRadius设为正数（如5）
• 保持所有ProgressCircle的strokeWidth一致，避免出现错位

内容的提问来源于stack exchange，提问作者Wahas Ali Mughal