如何在React Native中用SVG绘制带描边的环形图表？

要实现你期望的带描边环形效果，需调整圆环参数并通过多层Circle元素组合实现，具体修改如下：

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

const RingChart = () => {
  const radius = 54; // 圆环基础半径
  const strokeWidth = 10; // 红色进度环宽度
  const progress = 0.75; // 进度比例（75%）
  const circumference = 2 * Math.PI * radius;
  const progressLength = circumference * progress;
  const remainingLength = circumference * (1 - progress);

  return (
    <View style={{ height: 250, width: 250, backgroundColor: "green" }}>
      <Svg viewBox="0 0 120 120">
        {/* 1. 背景灰色圆环 */}
        <Circle
          cx="60"
          cy="60"
          r={radius}
          fill="transparent"
          stroke="#cccccc"
          strokeWidth={strokeWidth + 2} // 比红色环宽2，衬托白色描边
        />
        {/* 2. 红色进度圆环 */}
        <Circle
          cx="60"
          cy="60"
          r={radius}
          fill="transparent"
          stroke="red"
          strokeWidth={strokeWidth}
          strokeDasharray={[progressLength, remainingLength]}
          strokeLinecap="round" // 两端圆角，匹配期望效果
          transform="rotate(-90, 60, 60)" // 让进度从顶部开始
        />
        {/* 3. 白色内外描边 */}
        <Circle
          cx="60"
          cy="60"
          r={radius + strokeWidth / 2}
          fill="transparent"
          stroke="white"
          strokeWidth={1}
        />
        <Circle
          cx="60"
          cy="60"
          r={radius - strokeWidth / 2}
          fill="transparent"
          stroke="white"
          strokeWidth={1}
        />
      </Svg>
    </View>
  );
};

export default RingChart;

关键调整说明： #

• 修正圆环形态：把原代码中strokeWidth=60的实心块样式，改为小宽度的空心圆环，通过radius=54和strokeWidth=10适配画布范围。
• 多层元素组合：
  • 底层灰色圆环作为背景，宽度略大于红色环，用来衬托白色描边；
  • 中间红色圆环通过strokeDasharray控制进度显示，添加strokeLinecap="round"实现两端圆角；
  • 上层两个细白色圆环分别模拟红色环的内外描边。
• 进度起始位置优化：添加transform="rotate(-90, 60, 60)"让进度从顶部开始，符合常规环形图表的展示习惯。

内容的提问来源于stack exchange，提问作者Blogger Klik