本文原創(chuàng)首發(fā)于公眾號(hào)：ReactNative開發(fā)圈，轉(zhuǎn)載需注明出處。

React Native 圓形進(jìn)度條組件：react-native-circular-progress，圓形的進(jìn)度條組件，支持動(dòng)畫，支持iOS和Android。

演示動(dòng)畫

image.png

安裝方法

npm i --save react-native-circular-progress

IOS需要手動(dòng)Link下ReactART，用Xcode打開項(xiàng)目，添加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)(動(dòng)畫結(jié)束時(shí)的事件)
• 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時(shí)會(huì)報(bào)錯(cuò)。暫時(shí)沒找到原因。

完整示例

完整代碼：React Native 圓形進(jìn)度條組件 | forrest23.github.io
本次示例代碼在 Component03文件夾中。

組件地址

GitHub - bgryszko/react-native-circular-progress: React Native component for creating animated, circular progress with ReactART

微信不讓跳轉(zhuǎn)外鏈，可以點(diǎn)擊查看原文來查看外鏈GitHub內(nèi)容。

舉手之勞關(guān)注我的微信公眾號(hào)：ReactNative開發(fā)圈

image.png