React Native 圆形进度条组件
时间:2022-06-05
本文章向大家介绍React Native 圆形进度条组件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文原创首发于公众号:ReactNative开发圈,转载需注明出处。
React Native 圆形进度条组件:react-native-circular-progress,圆形的进度条组件,支持动画,支持iOS和Android。
演示动画
安装方法
npm i--save react-native-circular-progress
IOS需要手动Link下ReactART,用Xcode打开项目,添加ART.xcodeproj到Libraries中,然后在Link Binary With Libraries中添加libART.a。如下图所示:
使用示例
import { AnimatedCircularProgress } from 'react-native-circular-progress';
<AnimatedCircularProgress
size={120}
width={15}
fill={100}
tintColor="#00e0ff"
onAnimationComplete={() => console.log('onAnimationComplete')}
backgroundColor="#3d5875" />
API说明
- size – width and height of the circle(圆形的宽度和高度)
- width - thickness of the lines(圆形线的宽度)
- backgroundWidth - thickness of the background line(背景线的宽度)
- fill - current, percentage fill (from 0 to 100)(进度值)
- prefill - percentage fill before the animation (from 0 to 100)(预先设置的进度值)
- tintColor - color of a progress line(圆形的线的颜色)
- backgroundColor - color of a background for progress line. Use 'transparent' to hide(背景线的颜色)
- rotation - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360(旋转度数)
- tension - the tension value for the spring animation (see here)
- friction - the friction value for the spring animation (see here)
- linecap - the shape to be used at the ends of the circle. Possible values: butt (default), round or square. (see here)
- children(fill) - you can pass function as a child to receive current fill
- onAnimationComplete - you can pass a callback function that will be invoked when animation is complete. (see here)(动画结束时的事件)
- onLinearAnimationComplete - you can pass a callback function that will be invoked when linear animation is complete. (see here)
特别说明
在react-native 0.50.4版本中,backgroundColor设置transparent时会报错。暂时没找到原因。
完整示例
完整代码:https://github.com/forrest23/ReactNativeComponents 本次示例代码在 Component03文件夹中。
组件地址
GitHub - bgryszko/react-native-circular-progress: React Native component for creating animated, circular progress with ReactART
- Linux下用dd命令测试硬盘的读写速度
- 教你 Debug 的正确姿势——记一次 CoreMotion 的 Crash
- Linux系统yum命令安装软件时保留(下载)rpm包
- Go语言读写数据库
- 《Android 创建线程源码与OOM分析》
- 微信 Android 视频编码爬过的那些坑
- 少年,这有套《街霸2》AI速成心法,想传授于你……
- 你知道android的MessageQueue.IdleHandler吗?
- 《Android基础:Fragment,看这篇就够了》
- Android 7.0中ContentProvider实现原理
- 《iOS APP 性能检测》
- iOS 11 安全区域适配总结
- Linux下巧用chattr、watch命令的实例
- 【特斯拉组件】iOS高性能PageController
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Flutter 实战】大量复杂数据持久化
- GBDT+LR:Practical Lessons from Predicting Clicks on Ads
- 告别setState()! 优雅的UI与Model绑定 Flutter DataBus使用~
- k8s etcd 的实现原理
- iOS动态View的探索
- 安卓开发的瑞士军刀“Retrofit2框架”
- R语言中的广义线性模型(GLM)和广义相加模型(GAM):多元(平滑)回归分析保险资金投资组合信用风险敞口
- 来玩 TencentOS tiny 物联网终端操作系统
- LeetCode | 66.加一
- PNN:Product-based Neural Networks for User Response Prediction
- Redis | Redis Pub/Sub相关命令
- nginx upstream header过大是啥情况
- 8个写JavaScript代码的小技巧
- .NET Core中间件与依赖注入的一些思考
- 如何审计MySQL 8.0中的分类数据查询?