import React, { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Svg, LinearGradient, Stop, Path, Text, Defs, Circle, ClipPath, Rect } from 'react-native-svg';
interface BatteryProps {
batteryNum: number
}
const Battery = (props: BatteryProps) => {
const [batteryNum, setBatteryNum] = useState(0);//电池显示数字
const [batteryNumX, setBatteryNumX] = useState(0);//文字x坐标
const [batteryNumColor, setBatteryNumColor] = useState('white');//文字x坐标
const [colorHigh, setColorHigh] = useState('rgba(238, 144, 102, 1)');
const [colorLow, setColorLow] = useState('rgba(247, 205, 175, 1)');
useEffect(() => {
}, []);
useEffect(() => {
setBatteryNum(props.batteryNum)
//设置整体渐变色
if(props.batteryNum<=20 && props.batteryNum>0){
setColorHigh('rgba(238, 144, 102, 1)')
setColorLow('rgba(247, 205, 175, 1)')
}else if(props.batteryNum> 20 && props.batteryNum<=100){
setColorHigh('rgba(87, 217, 173, 1)')
setColorLow('rgba(161, 229, 207, 1)')
}else{
}
//设置文字显示x起点坐标
if(props.batteryNum>=10 && props.batteryNum<100){
setBatteryNumX(12)
}else if(props.batteryNum===100){
setBatteryNumX(8)
}else{
setBatteryNumX(15)
}
//设置文字渐变颜色
if(props.batteryNum>=44 && props.batteryNum<=46){
setBatteryNumColor('url(#grads4445)')
}else if(props.batteryNum>46 && props.batteryNum<=49){
setBatteryNumColor('url(#grads4649)')
}else if(props.batteryNum>49 && props.batteryNum<52){
setBatteryNumColor('url(#grads5052)')
}else if(props.batteryNum>=52 && props.batteryNum<=54){
setBatteryNumColor('url(#grads5354)')
}else if(props.batteryNum>54 && props.batteryNum<55){
setBatteryNumColor('url(#gradss5455)')
}else if(props.batteryNum>=55){
setBatteryNumColor('white')
}else{
setBatteryNumColor('rgba(23, 23, 74, 1)')
}
}, [props.batteryNum]);
const svgHeight = 74;
const svgWidth = 42;
return (
<View style={styles.battery}>
<View >
<Svg width={svgWidth} height={svgHeight} style={{}}>
<LinearGradient id="grad" x1={0} y1={1} x2={0} y2={0} >
<Stop offset={0} stopColor={colorLow} />
<Stop offset={1} stopColor={colorHigh} />
</LinearGradient>
<Path
d="M11.6,4v0.4H12V4H11.6zM31.5,4H31v0.4h0.4L31.5,4L31.5,4zM12.1,2.5c0,-1 0.8,-1.7 1.7,-1.7V0c-1.4,0 -2.6,1.2 -2.6,2.6H12.1zM12.1,4V2.5h-0.9V4H12.1zM9,4.5h2.6V3.5H9V4.5zM0.9,12.7c0,-4.5 3.6,-8.2 8.1,-8.2V3.5c-5,0 -9,4 -9,9h0.9V12.7zM0.9,64.9V12.7H0v52.3H0.9zM9,73.1c-4.5,0 -8.1,-3.7 -8.1,-8.2H0c0,5 4,9 9,9V73.1zM33,73.1H9v0.9h24V73.1zM41.1,64.9c0,4.5 -3.6,8.2 -8.1,8.2v0.9c5,0 9,-4 9,-9h-0.9V64.9zM41.1,12.7v52.3H42V12.7H41.1zM33,4.5c4.5,0 8.1,3.7 8.1,8.2H42c0,-5 -4,-9 -9,-9V4.5zM31.5,4.5H33V3.5h-1.5V4.5zM31,2.5V4h0.9V2.5H31zM29.3,0.9c0.9,0 1.7,0.8 1.7,1.7h0.9c0,-1.4 -1.2,-2.6 -2.6,-2.6C29.3,0 29.3,0.9 29.3,0.9zM13.8,0.9h15.5V0H13.8V0.9z"
fill="none"
stroke="rgba(255, 255, 255, 0.30)"
/>
<Path
d="M16,3c-0.9,0 -1.7,0.8 -1.7,1.7V7H9.9C6.1,7 3,10 3,13.9v50c0,3.8 3.1,6.9 6.9,6.9h22.3c3.8,0 6.9,-3.1 6.9,-6.9v-50c0,-3.8 -3.1,-6.9 -6.9,-6.9h-4.4V4.7c0,-1 -0.8,-1.7 -1.7,-1.7C26.1,3 16,3 16,3z"
fill="white"
stroke="#D9D9D9"
/>
{/* 反着来的 最大值71 最小值0*/}
<Rect x={0} y={(1-batteryNum/100)*71} width={svgWidth} height={svgHeight} fill={'url(#grad)'} clipPath='url(#clipPath3)' />
<ClipPath id="clipPath3">
<Path
d="M16,3c-0.9,0 -1.7,0.8 -1.7,1.7V7H9.9C6.1,7 3,10 3,13.9v50c0,3.8 3.1,6.9 6.9,6.9h22.3c3.8,0 6.9,-3.1 6.9,-6.9v-50c0,-3.8 -3.1,-6.9 -6.9,-6.9h-4.4V4.7c0,-1 -0.8,-1.7 -1.7,-1.7C26.1,3 16,3 16,3z"
fill="white"
stroke="#D9D9D9"
/>
</ClipPath>
{/* <Path
// d="M16,3c-0.9,0 -1.7,0.8 -1.7,1.7V7H9.9C6.1,7 3,10 3,13.9v49.9c0,3.8 3.1,6.9 6.9,6.9h22.3c3.8,0 6.9,-3.1 6.9,-6.9V13.9c0,-3.8 -3.1,-6.9 -6.9,-6.9h-4.4V4.7c0,-1 -0.8,-1.7 -1.7,-1.7H16z"
// d="M32.3,70.7H9.7c-3.7,0 -6.8,-3 -6.8,-6.8V37.6H39v26.3C39,67.7 36,70.7 32.3,70.7z"
d="M32.3,70.7H9.7c-3.7,0 -6.8,-3 -6.8,-6.8V37.6H39v26.3C39,67.7 36,70.7 32.3,70.7z"
fill="url(#grad)"
/> */}
<LinearGradient id="gradss5455" x1={0} y1={1} x2={0} y2={0} >
<Stop offset={1} stopColor={'#000000'} />
<Stop offset={0.3} stopColor={'#ffffff'} />
<Stop offset={0.4} stopColor={'#ffffff'} />
<Stop offset={0.5} stopColor={'#ffffff'} />
<Stop offset={0.6} stopColor={'#000000'} />
<Stop offset={0.7} stopColor={'#000000'} />
<Stop offset={0} stopColor={'#ffffff'} />
</LinearGradient>
<LinearGradient id="grads5354" x1={0} y1={1} x2={0} y2={0} >
<Stop offset={1} stopColor={'#000000'} />
<Stop offset={0.3} stopColor={'#ffffff'} />
<Stop offset={0.4} stopColor={'#ffffff'} />
<Stop offset={0.5} stopColor={'#ffffff'} />
<Stop offset={0.6} stopColor={'#ffffff'} />
<Stop offset={0.7} stopColor={'#ffffff'} />
<Stop offset={0} stopColor={'#ffffff'} />
</LinearGradient>
<LinearGradient id="grads5052" x1={0} y1={1} x2={0} y2={0} >
<Stop offset={1} stopColor={'#000000'} />
<Stop offset={0.3} stopColor={'#ffffff'} />
<Stop offset={0.4} stopColor={'#ffffff'} />
<Stop offset={0.5} stopColor={'#ffffff'} />
<Stop offset={0.6} stopColor={'#000000'} />
<Stop offset={0.7} stopColor={'#000000'} />
<Stop offset={0} stopColor={'#ffffff'} />
</LinearGradient>
<LinearGradient id="grads4649" x1={0} y1={1} x2={0} y2={0} >
<Stop offset={1} stopColor={'#000000'} />
<Stop offset={0.1} stopColor={'#ffffff'} />
<Stop offset={0.2} stopColor={'#ffffff'} />
<Stop offset={0.3} stopColor={'#ffffff'} />
<Stop offset={0.4} stopColor={'#000000'} />
<Stop offset={0.5} stopColor={'#000000'} />
<Stop offset={0.6} stopColor={'#000000'} />
<Stop offset={0.7} stopColor={'#000000'} />
<Stop offset={0} stopColor={'#ffffff'} />
</LinearGradient>
<LinearGradient id="grads4445" x1={0} y1={1} x2={0} y2={0} >
<Stop offset={1} stopColor={'#000000'} />
<Stop offset={0.1} stopColor={'#ffffff'} />
<Stop offset={0.2} stopColor={'#000000'} />
<Stop offset={0.3} stopColor={'#000000'} />
<Stop offset={0.4} stopColor={'#000000'} />
<Stop offset={0.5} stopColor={'#000000'} />
<Stop offset={0.6} stopColor={'#000000'} />
<Stop offset={0.7} stopColor={'#000000'} />
<Stop offset={0} stopColor={'#ffffff'} />
</LinearGradient>
{
batteryNum === 0 ? null : <Text x={batteryNumX}y={40} fontSize={12} fill={batteryNumColor}>
{batteryNum}%
</Text>
}
</Svg>
</View>
<View >
</View>
</View>
)
};
export default Battery;
const styles = StyleSheet.create({
battery: {
alignSelf: 'flex-end',
marginBottom: 16,
marginRight: 16,
// backgroundColor:'blue'
},
})
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » reactnative 电量自动-颜色渐变-带文字-svg-path-rect实现
发表评论 取消回复