項(xiàng)目中錄制視頻需要用到圓形進(jìn)度條，從網(wǎng)上搜了很多，終于發(fā)現(xiàn)一個(gè)好用的組件react-native-progress，這個(gè)組件支持線形和圓形多種形式的進(jìn)度條，先來看看效果圖~
官方效果圖.gif
這個(gè)組件有四種進(jìn)度條：
- Progress.Bar
- Progress.Pie
- Progress.Circle
- Progress.CircleSnail
今天主要結(jié)合自己的項(xiàng)目需求講下圓形進(jìn)度條Progress.Circle的使用，下面我們來看一下它怎么使用吧~
一、屬性介紹
1. 組件通用屬性
| 屬性 | 描述 | 默認(rèn)值 |
|---|---|---|
| animated | 是否對(duì)進(jìn)度進(jìn)行動(dòng)畫更改 | true |
| indeterminate | 如果設(shè)置為true，指示器將旋轉(zhuǎn)，進(jìn)度屬性將被忽略。 | false |
| progress | 指示器顯示的進(jìn)度， 0到1之間取值 | 0 |
| color | 指示器填充顏色 | rgba(0, 122, 255, 1) |
| unfilledColor | 剩余進(jìn)度的顏色 | None |
| borderWidth | 外部邊框?qū)挾龋?表示沒有邊框 | 1 |
| borderColor | 外部邊框顏色 | color |
| children | 可在進(jìn)度條內(nèi)部添加組件 | null |
2. 圓形進(jìn)度條組件屬性
| 屬性 | 描述 | 默認(rèn)值 |
|---|---|---|
| size | 圓的直徑 | 40 |
| thickness | 內(nèi)圓的厚度 | 3 |
| showsText | 是否顯示當(dāng)前進(jìn)度的文本 | false |
| formatText(progress) | 一個(gè)函數(shù)，用于返回文本顯示的字符串 | See source |
| textStyle | 進(jìn)度文本的樣式，字體顏色默認(rèn)為圓的color，字體大小和size屬性成比例 |
None |
| direction | 圓的方向，clockwise(順時(shí)針方向) 或者counter-clockwise(逆時(shí)針方向) |
clockwise |
| strokeCap | 圓的Stroke Cap樣式，butt, square or round
|
butt |
二、具體使用
（一）安裝
使用安裝命令
npm install react-native-progress --save進(jìn)行安裝；在ios上使用圓形進(jìn)度條需要在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系統(tǒng)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} // 進(jìn)度
unfilledColor="rgba(255,255,255,0.5)" // 剩余進(jìn)度的顏色
color={"#008aff"} // 顏色
thickness={6} // 內(nèi)圓厚度
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>
...
// 計(jì)時(shí)
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
