react-native-progress

ReactNative进度组件：圆形、条形、刻度......，带动画。

Getting started

使用该组件前，你需要先安装 react-native-svg $ npm install react-native-svg --save

$ npm install react-native-wf-progress --save

Usage

圆形进度条 CircularProgress 刻度进度条 Dial

import {
  CircularProgress,
  Dial
} from 'react-native-wf-progress';

<CircularProgress
  width={200}
//  同等效果
//  radius={100}
  progress={80}
  progressIndicator="circle"
  strokeWidth={{ background: 5, foreground: 20 }}
  strokeColor={{ background: '#F7F7F9', foreground: ['#FF8F2C', '#F84238'] }}
  fill="#FFFFFF">
  <View />
</CircularProgress>

<Dial
  style={styles.dial}
  width={300}
  progress={70}
  strokeColor={{
    background: 'rgba(255, 0, 0, 0.3)',
    foreground: 'rgba(255, 0, 0, 0.8)',
  }}
/>

Props CircularProgress

Props Dial