reactnative 电量自动-颜色渐变-带文字-svg-path-rect实现

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 >

</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*/}

<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>

</LinearGradient>

</LinearGradient>

</LinearGradient>

</LinearGradient>

{

batteryNum === 0 ? null : <Text x={batteryNumX}y={40} fontSize={12} fill={batteryNumColor}>

{batteryNum}%

</Text>

}

</Svg>

</View>

<View >

</View>

)

};

export default Battery;

const styles = StyleSheet.create({

battery: {

alignSelf: 'flex-end',

marginBottom: 16,

marginRight: 16,

// backgroundColor:'blue'

})