本文原創(chuàng)首發(fā)于公眾號：ReactNative開發(fā)圈，轉(zhuǎn)載需注明出處拒课。
React Native 圓形進(jìn)度條組件：react-native-circular-progress，圓形的進(jìn)度條組件，支持動畫继效，支持iOS和Android。
演示動畫
image.png
安裝方法
npm i --save react-native-circular-progress
IOS需要手動Link下ReactART装获，用Xcode打開項目瑞信，添加ART.xcodeproj到Libraries中，然后在Link Binary With Libraries中添加libART.a穴豫。如下圖所示：
image.png
使用示例
import { AnimatedCircularProgress } from 'react-native-circular-progress';
<AnimatedCircularProgress
size={120}
width={15}
fill={100}
tintColor="#00e0ff"
onAnimationComplete={() => 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)（進(jìn)度值）
- prefill - percentage fill before the animation (from 0 to 100)（預(yù)先設(shè)置的進(jìn)度值）
- 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(旋轉(zhuǎn)度數(shù))
- 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)(動畫結(jié)束時的事件)
- onLinearAnimationComplete - you can pass a callback function that will be invoked when linear animation is complete. (see here)
特別說明
在react-native 0.50.4版本中喧伞，backgroundColor設(shè)置transparent時會報錯。暫時沒找到原因。
完整示例
完整代碼：React Native 圓形進(jìn)度條組件 | forrest23.github.io
本次示例代碼在 Component03文件夾中潘鲫。
組件地址
微信不讓跳轉(zhuǎn)外鏈翁逞，可以點擊查看原文來查看外鏈GitHub內(nèi)容。
舉手之勞關(guān)注我的微信公眾號：ReactNative開發(fā)圈
image.png
