专栏首页React Native开发圈React Native 圆形进度条组件

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

本文分享自微信公众号 - ReactNative开发圈(ReactNative-Circle),作者:forrest23

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTTPS证书申请及windows server部署

    StartSSL免费DV证书 沃通(Wosign)免费DV证书 这两个已经被苹果拉入黑名单。我10月份在StartSSL申请的证书还可以使用。但是近期申请的已经...

    forrest23
  • React Native获取设备信息组件

    npm install--save react-native-device-info

    forrest23
  • React Native 图片查看组件

    npm i react-native-image-zoom-viewer--save

    forrest23
  • SAP S/4 HANA新变化-MM-IM物料帐:物料评估

    Material Ledger Obligatory for Material Valuation 物料帐强制启用 Description This simpl...

    SAP最佳业务实践
  • python note #1

    To record my process of studying python and to practice my English meanwhile, I'...

    py3study
  • Python入门之Python Colorama模块

    Jetpropelledsnake21
  • woocommerce的taxonomy-product_cat分类模板也需要定义否则可能排版乱了

      我们知道woocommerce(下称wc)的archive-product.php模板是定义shop page的,可能比较比较早版本的wc也是用这个文件来定...

    ytkah
  • Easy Basic HTTP authentication with Tornado

    I recently got a chance to play around with Tornado, which is pretty neat (altho...

    党志强
  • Android上的Web应用开发工具

    最后,因为我的手机是带全键盘的,并且是5行,独立数字键,所以,用来敲代码很爽,尤其是平时上课的时候,想到的一些片段,用来记录不错~

    libo1106
  • 为克隆后的CentOS虚拟机设置静态IP

    CentOS虚拟机克隆后,由于网卡MAC地址等信息跟被克隆的系统一致,但是克隆后的虚拟机网卡其实已经变了,所以CentOS不会采用原来的网卡配置文件。所以克隆后...

    ken.io

扫码关注云+社区

领取腾讯云代金券