File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Circle, G, Svg, Text } from 'react-native-svg';
import { BLACK } from '../color';
const CircularProgressBar = ({ percentage }) => {
// 원의 반지름
const radius = 30;
// 원의 중심 좌표
const centerX = radius + 5; // X 좌표
const centerY = radius + 5; // Y 좌표
// 원의 둘레
const circumference = 2 * Math.PI * radius;
// 원의 시작 각도 (12시 방향이 0도)
const startAngle = -Math.PI / 2;
// 퍼센티지에 따른 끝 각도 계산
const endAngle = startAngle + (percentage / 100) * (2 * Math.PI);
return (
<View style={styles.container}>
<Svg width={2 * (radius + 5)} height={2 * (radius + 5)}>
<G>
{/* 배경 원 */}
<Circle
r={radius}
cx={centerX}
cy={centerY}
fill="none"
stroke="#ddd"
strokeWidth={10}
/>
{/* 원형 그래프 */}
<Circle
r={radius}
cx={centerX}
cy={centerY}
fill="none"
stroke="#007AFF" // 원형 그래프의 색상
strokeWidth={10} // 원형 그래프의 두께
strokeDasharray={`${circumference}, ${circumference}`}
strokeDashoffset={circumference - (percentage / 100) * circumference}
/>
{/* 텍스트 */}
<Text
x={centerX - 7}
y={centerY + 5} // 텍스트 위치 조절
fontSize="15"
textAnchor="middle"
fill={BLACK} // 텍스트 색상
>
{percentage}%
</Text>
</G>
</Svg>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
marginRight:10,
},
});
export default CircularProgressBar;