import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Svg, { Circle, Defs, LinearGradient, Path, Stop } from 'react-native-svg';
interface Props {
? value: number; // 當(dāng)前值（0-100）
? size: number; // 組件尺寸
? strokeWidth: number; // 環(huán)形進(jìn)度條寬度
}
const styles = StyleSheet.create({
? container: {
? ? alignItems: 'center',
? ? justifyContent: 'center',
? },
? valueText: {
? ? fontSize: 24,
? ? color: '#333',
? ? fontWeight: 'bold',
? ? marginBottom: 4,
? },
? labelText: {
? ? fontSize: 16,
? ? color: '#666',
? },
});
const Gauge: React.FC<Props> = ({ value, size, strokeWidth }) => {
? const radius = (size - strokeWidth) / 2;
? const circumference = 2 * Math.PI * radius;
? const arcLength = circumference * (value / 100);
? return (
? ? <View style={[styles.container, { width: size, height: size }]}>
? ? ? <Svg width={size} height={size}>
? ? ? ? <Defs>
? ? ? ? ? <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
? ? ? ? ? ? <Stop offset="0%" stopColor="#B8B8B8" />
? ? ? ? ? ? <Stop offset="100%" stopColor="#666" />
? ? ? ? ? </LinearGradient>
? ? ? ? </Defs>
? ? ? ? <Circle
? ? ? ? ? cx={radius + strokeWidth / 2}
? ? ? ? ? cy={radius + strokeWidth / 2}
? ? ? ? ? r={radius}
? ? ? ? ? stroke="#E6E6E6"
? ? ? ? ? strokeWidth={strokeWidth}
? ? ? ? ? fill="none"
? ? ? ? />
? ? ? ? <Path
? ? ? ? ? stroke="url(#grad)"
? ? ? ? ? fill="none"
? ? ? ? ? strokeLinecap="round"
? ? ? ? ? strokeWidth={strokeWidth}
? ? ? ? ? strokeDasharray={`${arcLength}, ${circumference}`}
? ? ? ? ? d={`M${radius + strokeWidth / 2},${strokeWidth / 2} a${radius},${radius} 0 0,1 0,${
? ? ? ? ? ? circumference - strokeWidth
? ? ? ? ? }`}
? ? ? ? />
? ? ? ? <View style={{ position: 'absolute', alignItems: 'center' }}>
? ? ? ? ? <View
? ? ? ? ? ? style={{
? ? ? ? ? ? ? position: 'absolute',
? ? ? ? ? ? ? width: strokeWidth,
? ? ? ? ? ? ? height: size / 5,
? ? ? ? ? ? ? backgroundColor: '#333',
? ? ? ? ? ? ? bottom: radius * (1 - Math.sin((value * Math.PI) / 100)),
? ? ? ? ? ? }}
? ? ? ? ? />
? ? ? ? ? <Text style={styles.valueText}>{value}</Text>
? ? ? ? ? <Text style={styles.labelText}>VALUE</Text>
? ? ? ? </View>
? ? ? </Svg>
? ? </View>
? );
};
export default Gauge;
