React Native SVG 堆叠圆圈不显示内半部分

问题描述 投票:0回答:1

较暗的半透明环应该与较亮的半透明环具有相同的厚度,但由于某种原因不是。当我从“前景”圆圈中去掉不透明度时,问题就开始了。我不知道为什么,希望得到任何意见!预先感谢!

import { View, Text } 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',
            //backgroundColor: 'green'
            }}
            >
                <SVG>
                    {/*Background*/}
                    <Circle 
                    cx={radius}
                    cy={radius}
                    r={innerRadius} 
                    //fill={'blue'}
                    strokeWidth={strokeWidth}
                    stroke={color}
                    opacity={ 0.2 }
                    />
                    {/*Foreground*/}
                    <Circle 
                    cx={radius}
                    cy={radius}
                    r={innerRadius} 
                    //fill={'blue'}
                    strokeWidth={strokeWidth}
                    stroke={color}
                    strokeDasharray={[circumference*.5,circumference]}
                    />

            
                </SVG>


        </View>
    )
}
react-native svg
1个回答
0
投票

在两个圆形道具中添加

fill="none"
,这可以防止任何填充重叠或影响圆形的外观。

© www.soinside.com 2019 - 2024. All rights reserved.