import React, { FC } from 'react';
import { StyleSheet, View } from 'react-native';
import Svg, { Defs, LinearGradient, Stop, Path, G } from 'react-native-svg';
interface Props {
value: number;
minValue: number;
maxValue: number;
}
const Gauge: FC<Props> = ({ value, minValue, maxValue }) => {
const angle = ((value - minValue) / (maxValue - minValue)) * 225 - 45;
const radius = 140;
const pointerX = radius + radius * 0.8 * Math.cos((angle * Math.PI) / 180);
const pointerY = radius + radius * 0.8 * Math.sin((angle * Math.PI) / 180);
const gradientId = 'gradient';
const colors = ['#f00', '#888'];
const gradientColors = colors.map((color, i) => (
<Stop key={i} offset={`${(i / (colors.length - 1)) * 100}%`} stopColor={color} />
));
return (
<Svg width={280} height={280}>
<Defs>
<LinearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
{gradientColors}
</LinearGradient>
</Defs>
<G transform={`rotate(${angle + 90},140,140)`}>
<Path d="M140,140 L140,20 A120,120 0 0,1 260,140 Z" fill={`url(#${gradientId})`} />
</G>
<Path
d={`M ${radius},${radius} L ${pointerX},${pointerY}`}
stroke="#000"
strokeWidth={3}
strokeLinecap="round"
fill="#000"
/>
</Svg>
);
};
const styles = StyleSheet.create({});
export default Gauge;
2023-06-15import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; impor...
