react-native 圆形进度条

0.342字数 268阅读 6642

项目中录制视频需要用到圆形进度条,从网上搜了很多,终于发现一个好用的组件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

二、具体使用

(一)安装
  1. 使用安装命令npm install react-native-progress --save进行安装;

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

QQ20180104-160911@2x.png
QQ20180104-160636@2x.png

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

QQ20180104-160516@2x.png

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

(二)使用

代码如下:

...
import * as Progress from 'react-native-progress';
let seconds = 0;
...
<View 
    style={{
        justifyContent: 'center',
        alignItems: 'center'
    }}>
    <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={ // 子布局
            <View style={{
                position: 'absolute',
                top: 6,
                left: 6,
            }}>
                <TouchableOpacity
                    activeOpacity={0.75}
                    onPressIn={() => {
                        console.log("onPressIn");
                        this.countDown();
                    }}
                    onPressOut={() => {
                        console.log("onPressOut");
                        this.timer && clearInterval(this.timer);
                    }}
                    onPress={() => {}}
                    onLongPress={() => console.log("onLongPress")}
                >
                    <Image
                        style={{width:72,height:72}}
                        source={StaticImage.solidCircle}
                    />
                </TouchableOpacity>
            </View>
        }
    >
    </Progress.Circle>
</View>  
...
    // 计时
    countDown() {
        this.timer = setInterval(() => {
            seconds += 0.1;
            console.log('seconds=',seconds);
            console.log('progress---',this.state.progress);
            if(seconds <= 15){
                this.setState({
                    progress: seconds / 15,
                });
            }
            if(seconds > 15){
                this.timer && clearInterval(this.timer);
            }
        },100);
    }                   

效果图:

QQ20180104-173449.gif

最后附上github地址:react-native-progress

推荐阅读更多精彩内容