React Native 圆形进度条组件

最新推荐文章于 2025-03-28 10:50:05 发布

csdn产品小助手

最新推荐文章于 2025-03-28 10:50:05 发布

阅读量775

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发 xcode java

原文链接：https://juejin.im/post/5a4d89b5f265da4334705190

本文原创首发于公众号：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)