ReactNative实现一个圆环进度条

我们直接看效果,如下图

我们在直接上代码

/*** 圆形进度条*/
import React, {useState, useEffect} from 'react';
import Svg, {Circle,G,LinearGradient,Stop,Defs,Text,
} from 'react-native-svg';
import {View, StyleSheet} from 'react-native';// 渐变色
const CircleProgress = props => {const {progress, durationTime, children, customeSvgSize, customeStrokeWidth} =props;let svgSize = customeSvgSize ? customeSvgSize : 200; // 画布的宽高const halfOfSvgSize = svgSize / 2;const strokeWidth = customeStrokeWidth ? customeStrokeWidth : 10; // 圆形进度条宽度const radius = (svgSize - strokeWidth) / 2; // 外层半径const innerRadius = radius - 6; // 内层半径const circumference = 2 * radius * Math.PI; // 总周长// 背景色,圆环const linearGradientColors = [{stop: '0%', color: '#36B5AA'},{stop: '50%', color: '#317AF7'},{stop: '100%', color: '#3396D2'},];const circumferenceWithProgress = circumference * (1 - progress);const outerCircleCommonConfig = {fill: 'none',cx: halfOfSvgSize,cy: halfOfSvgSize,r: radius,strokeLinecap: 'round',strokeWidth: strokeWidth,strokeDasharray: `${circumference}  ${circumference}`,};const [count, setCount] = useState(durationTime);return (<View><Svg width={svgSize} height={svgSize}><Defs><LinearGradient x1="100%" y1="100%" x2="0%" y2="0%" id="gradient">{linearGradientColors.map((item, index) => (<Stop key={index} offset={item.stop} stopColor={item.color} />))}</LinearGradient></Defs><G rotation={-90} origin={`${halfOfSvgSize}, ${halfOfSvgSize}`}><Circle stroke="#D2D2D2" {...outerCircleCommonConfig} /><Circlestroke="url(#gradient)"fill="none"{...outerCircleCommonConfig}strokeDashoffset={circumferenceWithProgress}/></G></Svg><Viewstyle={[{width: svgSize, height: svgSize}, styles.pa, styles.center]}>{children}</View></View>);
};
const styles = StyleSheet.create({main: {flexDirection: 'row',},pa: {position: 'absolute',top: 0,left: 0,},center: {justifyContent: 'center',alignItems: 'center',},
});
export default CircleProgress;

注意:1.需要引入react-native-svg库,因为我们用到的是SVG

           2.另外圆环是使用Circle实现,另外使用到了G,用来旋转,不旋转的话,看下图

旋转-45°之后,在看下图

可以看出来哪里不一样了吧

进度是70%,是下面的样子(记得旋转-90°额)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/667991.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyTorch 2.2 中文官方教程(四)

torch.nn 到底是什么&#xff1f; 原文&#xff1a;pytorch.org/tutorials/beginner/nn_tutorial.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 注意 点击这里下载完整示例代码 作者&#xff1a; Jeremy Howard&#xff0c;fast.ai。感谢 Rachel Thomas 和 Fr…

队列---数据结构

定义 队列&#xff08;Queue&#xff09;简称队&#xff0c;也是一种操作受限的线性表&#xff0c;只允许在表的一端进行插入&#xff0c;而在表的另一端进行删除。向队列中插入元素称为入队或进队&#xff1b;删除元素称为出队或离队。 队头&#xff08;Front&#xff09;&a…

2024年Java面试题大全 面试题附答案详解,BTA内部面试题

基础篇 1、 Java语言有哪些特点 1、简单易学、有丰富的类库 2、面向对象&#xff08;Java最重要的特性&#xff0c;让程序耦合度更低&#xff0c;内聚性更高&#xff09; 阿里内部资料 基本类型 大小&#xff08;字节&#xff09; 默认值 封装类 6、Java自动装箱与拆箱 装箱就是…

Debian 11 安装并开启SSH服务实现允许root用户使用SecureCRT远程登录

Debian11系统默认没有安装SSH服务&#xff0c;如需要开启远程登录则需要安装相应的服务。 确保你已经登录到Debian系统&#xff0c;并具有root用户或sudo特权。 打开终端&#xff0c;并使用以下命令安装OpenSSH服务器软件包&#xff1a; sudo apt update sudo apt install ope…

Maven提示Failure to find com.oracle:ojdbc14:jar:10.2.0.4.0

目录 问题 解决方案 1、下载oracle的驱动jar包 2、安装到本地仓库 3、检查本地仓库是否成功安装 4、Maven先clean &#xff0c;再install。 问题 项目引入Oracle依赖后报错&#xff0c;显示为红色。 解决方案 1、下载oracle的驱动jar包 首先我们要去下载一个oracle的…

undefined symbol: avio_protocol_get_class, version LIBAVFORMAT_58

rv1126上进行编译和在虚拟机里面进行交叉编译ffmpeg都不行 解决办法查看 查看安装的ffmpeg链接的文件 ldd ./ffmpeg rootEASY-EAI-NANO:/home/nano/ffmpeg-4.3.6# ldd ffmpeg linux-vdso.so.1 (0xaeebd000)libavdevice.so.58 > /lib/arm-linux-gnueabihf/libavde…

MySQL备份策略

mysqldump提供在线逻辑备份的功能。以下讨论使用mysqldump进行备份的策略。 假设我们使用以下命令在周日下午1点&#xff08;此时负载较低&#xff09;对所有数据库中的所有InnoDB表进行全备份&#xff1a; $> mysqldump --all-databases --master-data --single-transact…

哪些因素会限制带宽的可用性?

当我们讨论带宽的可用性时&#xff0c;我们主要关注的是数据传输的速度和容量。带宽就像一条公路&#xff0c;数据就像行驶在公路上的车辆&#xff0c;带宽越大&#xff0c;可以同时传输的数据就越多&#xff0c;数据传输的速度也就越快。但是&#xff0c;就像公路会有各种限制…

【云原生运维问题记录】kubesphere登录不跳转问题

文章目录 现象问题排查 结论先行&#xff1a;kubesphere-system名称空间下reids宕机重启&#xff0c;会判断是否通过registry-proxy重新拉取镜像&#xff0c;该镜像原本是通过阿里云上拉取&#xff0c;代理上没有出现超时情况&#xff0c;导致失败。解决方案&#xff1a;删除re…

k8s-常用工作负载控制器(更高级管理Pod)

一、工作负载控制器是什么&#xff1f; 二、Deploymennt控制器&#xff1a;介绍与部署应用 部署 三、Deployment控制器&#xff1a;滚动升级、零停机 方式一&#xff1a; 通个加入健康检查可以&#xff0c;看到&#xff0c;nginx容器逐个被替代&#xff0c;最终每个都升级完成&…

嵌入式系统设计师之文件系统(3.2.5)

目录 ​​​​​​​一、文件和目录&#xff08;II&#xff09; 1、文件 2、目录 二、文件存取方法、存取控制&#xff08;II&#xff09; 1、文件存取方法 2、文件的访问 3、文件控制 三、常见嵌入式文件系统&#xff08;I&#xff09; 一、文件和目录&#xff08;I…

AI助力农作物自动采摘,基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建作物生产场景下番茄采摘检测计数分析系统

去年十一那会无意间刷到一个视频展示的就是德国机械收割机非常高效自动化地24小时不间断地在超广阔的土地上采摘各种作物&#xff0c;专家设计出来了很多用于采摘不同农作物的大型机械&#xff0c;看着非常震撼&#xff0c;但是我们国内农业的发展还是相对比较滞后的&#xff0…

国辰智企APS自动化排产平台:实现生产计划与其他系统无缝协同

在当今竞争激烈的制造环境中&#xff0c;有效的生产计划和排程对于企业的成功至关重要。APS生产计划排程平台作为一种先进的工具&#xff0c;正越来越受到企业的关注和应用。那么&#xff0c;APS生产计划排程平台有哪些类型呢&#xff1f;本文将为您详细介绍。 1.基于规则的APS…

力扣_字符串3—通配符匹配

题目 给你一个输入字符串 s s s 和一个字符模式 p p p &#xff0c;请你实现一个支持 ? ? ? 和 ∗ * ∗ 匹配规则的通配符匹配&#xff1a; ? ? ? 可以匹配任何单个字符。 ∗ * ∗可以匹配任意字符序列&#xff08;包括空字符序列&#xff09;。 判定匹配成功的充要…

vue-element-admin npm install 失败解决

git地址&#xff1a;https://github.com/PanJiaChen/vue-element-admin/tree/master 原因&#xff1a; tui-editor插件改名导致 解决方法&#xff1a; 第一步&#xff1a; package.json文件 "tui-editor": "1.3.3",修改为 "toast-ui/editor&qu…

小埋的解密游戏的题解

题目描述 小埋最近在玩一个解密游戏&#xff0c;这个游戏的解密方法是这样的&#xff0c;这个游戏会给你提供 个数,让我们求出这 个数里面&#xff0c;有多少个连续的数的平均数大于某个给定的数 。这个数可能会很大&#xff0c;所以我们要输出这个数对 的取模结果。现在小…

99例电气实物接线及52个自动化机械手动图

给大家分享一些流水线设计中常见的一些结构&#xff0c;这些动态图很直观&#xff0c;有助于大家了解其原理&#xff0c;非常好懂。 1.家庭总电箱接线图 2.经典双控灯接线 3.五孔一开接线 4.电动机点动控制接线&#xff08;不安全&#xff09; 5.电动机自锁接线图&#xff08;…

git常用一些操作

1. git status // 查看当前目录更新 2. git checkout -b <NEW_BRANCH> // 新切一个分支&#xff08;只在第一次操作的时候做&#xff0c;后面就不用做了&#xff09; 3. git pull origin <BRANCH_NAME> …

Vue中跨域问题的解决

目录 1 跨域的概念 2 解决办法 2.1 修改请求实例的公共前缀 2.2 修改vite.config.js文件 1 跨域的概念 由于浏览器的同源策略限制&#xff0c;向不同源(不同协议、不同域名、不同端口)发送ajax请求会失败 2 解决办法 原理&#xff1a;使得浏览器向两个端口发送请求和接手…

怎样理解Vue单向数据流

在前端开发中&#xff0c;数据流是一个非常重要的概念。Vue.js作为一种流行的前端框架&#xff0c;采用了单向数据流的架构&#xff0c;旨在简化开发过程并提高应用的可维护性。本文将探讨Vue单向数据流的含义以及它的使用方法。 什么是单向数据流&#xff1f; 在Vue中&#…