React Native 圆形进度条组件

XiNGRZ 发布于2019-08-21 18:37 / 1915人阅读

摘要：演示动画安装方法需要手动下，用打开项目，添加到中，然后在中添加。暂时没找到原因。完整示例完整代码圆形进度条组件本次示例代码在文件夹中。组件地址微信不让跳转外链，可以点击查看原文来查看外链内容。

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

 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时会报错。暂时没找到原因。

完整示例

完整代码：React Native 圆形进度条组件 | forrest23.github.io
本次示例代码在 Component03文件夹中。

组件地址

GitHub - bgryszko/react-native-circular-progress: React Native component for creating animated, circular progress with ReactART

微信不让跳转外链，可以点击查看原文来查看外链GitHub内容。

举手之劳关注我的微信公众号：ReactNative开发圈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90641.html

使用React Native制作圆形加载条

摘要：前端常规制作进度条方法前端实现相对容易点，我们可以用去绘制圆，也可以用去绘制使用主要是用进行绘制，关于使用可以看这里。 showImg(https://segmentfault.com/img/bVCkNJ); 先放运行截图说明做什么吧， showImg(https://segmentfault.com/img/bVCkND); react-native-percentage-circ...

xiongzenghui 2019-08-20 10:29 评论0 收藏0
React Native 常用的 15 个库

摘要：声明式用法只需使用动画的名称，该动画将在加载该元素时立即生效。实际案例这个库支持本地推送通知功能比较全面。实际案例具有缩放支持，回调，缩放以适应和滚动指示器支持的组件。这是图像上传或图像处理的基本库。本篇 React native 库列表不是从网上随便找的，这些是我在我的应用中亲自使用的库。这些库功能可能跟其它库也有，但经过大量研究并在我的程序中尝试后，我选择了这些库。想阅读更...

Juven 2019-08-23 16:56 评论0 收藏0
小哥哥小姐姐看过来，这里有个组件库需要您签收一下

摘要：如果你想减少包大小，你可以这样引入事实上，每个组件都是支持单独安装的，我们也推荐你使用这种方式引入组件。以下是运行示例后各界面的截图组件图标右上角的圆形徽标数字。 1. 前言一直以来都想做个组件库，一方面是对工作中常遇问题的总结，另一方面也确实能够提升工作效率（谁又不想造一个属于自己的轮子呢~），于是乎就有了本文的主角儿rn-components-kit。市面上web的UI组件库如...

Alan 2019-08-26 10:47 评论0 收藏0