react-native 圆形进度条

Z时代
2024-01-10
分类：综合

react

项目中录制视频需要用到圆形进度条，从网上搜了很多，终于发现一个好用的组件react-native-progress，这个组件支持线形和圆形多种形式的进度条，先来看看效果图~

官方效果图.gif

这个组件有四种进度条：

Progress.Bar

Progress.Pie

Progress.Circle

Progress.CircleSnail

今天主要结合自己的项目需求讲下圆形进度条Progress.Circle的使用，下面我们来看一下它怎么使用吧~

一、属性介绍

1. 组件通用属性

属性	描述	默认值
animated	是否对进度进行动画更改	true
indeterminate	如果设置为true，指示器将旋转，进度属性将被忽略。	false
progress	指示器显示的进度， 0到1之间取值	0
color	指示器填充颜色	rgba(0, 122, 255, 1)
unfilledColor	剩余进度的颜色	None
borderWidth	外部边框宽度，0表示没有边框	1
borderColor	外部边框颜色	color
children	可在进度条内部添加组件	null

2. 圆形进度条组件属性

属性	描述	默认值
size	圆的直径	40
thickness	内圆的厚度	3
showsText	是否显示当前进度的文本	false
formatText(progress)	一个函数，用于返回文本显示的字符串	See source
textStyle	进度文本的样式，字体颜色默认为圆的 `color` ，字体大小和 `size` 属性成比例	None
direction	圆的方向， `clockwise` (顺时针方向) 或者 `counter-clockwise` (逆时针方向)	clockwise
strokeCap	圆的Stroke Cap样式， `butt` , `square` or `round`	butt

二、具体使用

（一）安装

使用安装命令 npm install react-native-progress --save 进行安装；

在ios上使用圆形进度条需要在Libraries目录下添加ART.xcodeproj，路径为node_modules/react-native/Libraries/ART，如图：

[email protected]

3.在Build Phases下找到Link Binary With Libraries，添加libART.a，如图：

[email protected]

注：android系统npm完成后直接使用即可。

（二）使用

代码如下：

...
import * as Progress from 'react-native-progress';
let seconds = 0;
...
    <Progress.Circle
        style={{
            borderRadius: 42,
            width: 84,
            height: 84
        }}
        size={84} // 圆的直径
        progress={this.state.progress} // 进度
        unfilledColor="rgba(255,255,255,0.5)" // 剩余进度的颜色
        color={"#008aff"} // 颜色
        thickness={6} // 内圆厚度
        direction="clockwise" // 方向
        borderWidth={0} // 边框
        children={ // 子布局
                 {
                        console.log("onPressIn");
                        this.countDown();
                    }}
                    onPressOut={() => {
                        console.log("onPressOut");
                        this.timer && clearInterval(this.timer);
                    }}
                    onPress={() => {}}
                    onLongPress={() => console.log("onLongPress")}
                >
        }
    >
...
    // 计时
    countDown() {
        this.timer = setInterval(() => {
            seconds += 0.1;
            console.log('seconds=',seconds);
            console.log('progress---',this.state.progress);
            if(seconds  15){
                this.timer && clearInterval(this.timer);
            }
        },100);
    }