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