较暗的半透明环应该与较亮的半透明环具有相同的厚度,但由于某种原因不是。当我从“前景”圆圈中去掉不透明度时,问题就开始了。我不知道为什么,希望得到任何意见!预先感谢!
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>
)
}
在两个圆形道具中添加
fill="none"
,这可以防止任何填充重叠或影响圆形的外观。