React Native SVG堆叠圆环内侧半环未显示问题求助

问题根源 #

你的代码里SVG组件未设置width、height和viewBox属性，导致SVG的视口范围和外层View不匹配，背景圆环的内侧部分被裁剪——之前前景圆环的opacity属性掩盖了这个问题，移除后就暴露了显示异常。

解决步骤 #

给SVG添加与外层View匹配的尺寸属性，让内部坐标系统完全对齐：

• 给SVG设置width和height为外层View的尺寸（即radius*2）
• 设置viewBox为0 0 ${radius*2} ${radius*2}，确保SVG内部元素的绘制范围覆盖整个View区域

修改后的完整代码 #

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

type RingProgressProps = {
    radius?: number;
    strokeWidth?: number;
}

const color = '#EE0F55';

const RingProgress = ({radius = 100, strokeWidth = 20 }: RingProgressProps) => {
    const innerRadius = radius - strokeWidth/2;
    const circumference = 2 * Math.PI * innerRadius;

    return (
        <View 
            style={{
                width: radius*2, 
                height: radius*2, 
                alignSelf: 'center',
            }}
        >
            <SVG 
                width={radius*2} 
                height={radius*2} 
                viewBox={`0 0 ${radius*2} ${radius*2}`}
            >
                {/* 背景圆环 */}
                <Circle 
                    cx={radius}
                    cy={radius}
                    r={innerRadius} 
                    strokeWidth={strokeWidth}
                    stroke={color}
                    opacity={0.2}
                />
                {/* 前景半圆环 */}
                <Circle 
                    cx={radius}
                    cy={radius}
                    r={innerRadius} 
                    strokeWidth={strokeWidth}
                    stroke={color}
                    strokeDasharray={[circumference*.5, circumference]}
                />
            </SVG>
        </View>
    )
}

关键说明 #

• viewBox定义了SVG内部的坐标空间，和外层View尺寸一致后，所有元素都会在完整空间内绘制，不会出现裁剪
• 两个Circle的核心参数（cx、cy、r、strokeWidth）保持一致，才能保证堆叠后完全对齐，背景环厚度和前景环一致

内容的提问来源于stack exchange，提问作者Trigun Soni