React Native 圓形進度條組件

本文原創首發於公衆號：ReactNative開發圈，轉載需註明出處。

React Native 圓形進度條組件：react-native-circular-progress，圓形的進度條組件，支持動畫，支持iOS和Android。

演示動畫

安裝方法

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

IOS須要手動Link下ReactART，用Xcode打開項目，添加ART.xcodeproj到Libraries中，而後在Link Binary With Libraries中添加libART.a。以下圖所示：

使用示例

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)（進度值）
• prefill - percentage fill before the animation (from 0 to 100)（預先設置的進度值）
• 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(旋轉度數)
• 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)(動畫結束時的事件)
• onLinearAnimationComplete - you can pass a callback function that will be invoked when linear animation is complete. (see here)

特別說明

在react-native 0.50.4版本中，backgroundColor設置transparent時會報錯。暫時沒找到緣由。

完整示例

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

組件地址

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

微信不讓跳轉外鏈，能夠點擊查看原文來查看外鏈GitHub內容。

舉手之勞關注個人微信公衆號：ReactNative開發圈