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

于 2024-07-12 18:17:01 发布
阅读量1k 收藏 20
点赞数 5
文章标签： react native react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34812958/article/details/140386116
版权

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'

  },

})

it_remember
关注
利用svg实现图形的阴影以及渐变功能。
gx01013的博客
07-18 1289
利用svg实现图形的阴影以及渐变功能。
画布渐变以及svg图形
hbl020305的博客
07-16 866
canvas画布和svg图形
svg path 设置fill的渐变色
u012632105的博客
09-03 1888
表示从 70% 的位置开始变成透明。属性规定了渐变颜色的位置，例如。标签定义了渐变的颜色和位置。定义了一个线性渐变，
react hooks 封装svg 双色(可拓展多色)图标组件
三季雨
09-07 1004
根据一个颜色属性，其他图层颜色透明度降低，类似于 ant 双色图标 （https://ant.design/components/icon-cn/）里面拓展了 颜色 鼠标移入动画 自由控制 svg动画参考 https://animista.net/play/basic/slide-bck/slide-bck-tl图标拓展可以直接使用 https://www.iconfont.cn/ 下载 复制svg 需要自己转换下，参考下面案例案例。
ReactNative实现文本渐变
xvzhengyang的博客
02-04 995
ReactNative实现的文本渐变
react native expo 如何让文字产生线性渐变
XTFSLJC的博客
09-23 821
react native expo 如何使用线性渐变,如何让文字页产生线性渐变效果
探索React Native的SVG动态线性渐变库：react-native-svg-animated-linear-gradient
最新发布
gitblog_00026的博客
04-19 501
探索React Native的SVG动态线性渐变库：react-native-svg-animated-linear-gradient react-native-svg-animated-linear-gradientA wrap SVG component for animated linear gradient项目地址:https://gitcode.com/gh_mirrors/re/re...
taro rn 端实现背景渐变 文本渐变
qq_48612020的博客
04-14 305
taro rn 端实现背景渐变 文本渐变。
react-native-svg-transformer：以与在Web应用程序中相同的方式在React Native项目中导入SVG文件
02-05
react-native-svg-transformer 当使用诸如类的库将导入的SVG图像转换为React组件时，React Native SVG转换器允许您以与在Web应用程序中相同的方式在React Native项目中导入SVG文件。 这样就可以对React Native和...
react-native-svg-charts：:chart_increasing:一个库可以为React Native统治所有图表
02-05
react-native-svg-charts 欢迎使用react-native-svg-charts！ react-native-svg-charts为iOS和Android上的React Native提供SVG图表支持，以及Web的兼容性层。 寻找维护者！ 我一个人没有时间维护这个库了。 最好是...
react-reacttweenReact组件的渐变动画
08-14
react-tween：React组件的渐变动画
React-Native-QRCode-Reader:使用 React Native 的二维码扫描应用
05-29
React Native 中的二维码扫描器 这个应用程序是使用 React Native 制作的。 安装 ...react-native-qrcode-scanner 教程 作者 比利时 Android -所有作品- 致谢 给使用过代码的任何人的提示 灵感 等等
react-native-svg-asset-plugin:用于在React Native中导入SVG图像的资源插件
05-01
react-native-svg-asset插件 用于React Native的资源插件，可将SVG与Image组件一起使用。 通过在编译时生成PNG并将其传递到地铁变压器的方式进行工作。 :mobile_phone: 如果您还想将SVG图像用作应用程序启动器...
react-native-svg-charts-examples：react-native-svg-charts的用法示例的集合
02-05
react-native-svg-charts-examples 该存储库旨在用作的展示。 在这里，我们尝试收集所有最酷的实现和用例，以启发其他人。 开源就是分享知识！ 您是否曾经使用react-native-svg-charts制作了很酷react-native-svg-...
react-native库记录
T3119205的专栏
11-22 297
reactnative，常用库记录
React-Native开发中常用的第三方控件持续更新
weixin_34097242的博客
10-22 478
十一假期已经过去了，今天正式开工了，这里的文章我会持续进行更新，希望为开发的小伙伴们提供点帮助，如果能帮到你们，我就心满意足了。 十一假期学习撸了一个小程序，欢迎各位朋友进行关注，代码已经在gitHub上开源： 清风天气 清风天气 2018.10.10更新： 格式化输入框textInput: github.com/react-nativ… 2018.10.8更新： 美团开源的ReactNative...
ReactNative进阶（四十五）：渐变组件 react-native-linear-gradient
IT全栈 华强工作室
07-14 3804
文章目录一、安装二、属性介绍2.1 colors2.2 start / end2.3 locations应用拓展阅读 一、安装 npm i react-native-linear-gradient react-native link react-native-linear-gradient 二、属性介绍 2.1 colors 默认情况下，渐变色的方向是从上向下的。 <LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} st
SVG.js 颜色渐变使用
weixin_34320724的博客
03-27 306
一、SVG.Gradient 1.线性渐变、径向渐变，设置渐变的起始点，设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradient 渐变处理 linear、radial //线性渐变 linear //径向渐变 radial var gradient = draw.gradient('radial', function (s...
如何使用react-native-svg和react-native-svg-transformer加载本地svg图片
09-06
要使用 `react-native-svg` 和 `react-native-svg-transformer` 加载本地 SVG 图像，你可以按照以下步骤进行操作： 1. 首先，确保你已经在项目中安装了 `react-native-svg` 和 `react-native-svg-transformer` 依赖...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值