2023-06-15

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; // 当前值（0-100）

  size: number; // 组件尺寸

  strokeWidth: number; // 环形进度条宽度

}

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;