react-native-wf-progress

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

Usage no npm install needed!

<script type="module">
  import reactNativeWfProgress from 'https://cdn.skypack.dev/react-native-wf-progress';
</script>

README

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 备注 type 是否必须
style 样式 ViewPropTypes.style 非必须
width 控件宽。控件必然为正方形，会根据width或radius自动计算出相应尺寸 number width、radius必须传一个。若都传则以width为准
radius 圆的半径 number width、radius必须传一个。若都传则以width为准
progress 进度 number，0-100范围 非必须
progressIndicator 进度条指示器类型，目前只支持"小圆点" 'none' | 'circle' 非必须，默认none
indicatorRadius 指示器半径，如果指示器是圆的话 number 非必须，默认5
strokeColor 进度条颜色，前景进度条支持渐变 {
 background: string,
 foreground: arrayOf(string)
} 		非必须。背景进度条默认'#FFFFFF'，前景默认['#CCCCCC', '#CCCCCC']
strokeWidth 进度条宽度 {
 background: number,
 foreground: number
} 		非必须。背景进度条宽度默认5，前景默认20
fill 内圆的填充颜色 string 非必须。默认透明

Props Dial

props 备注 type 是否必须
style 样式 ViewPropTypes.style 非必须
width 控件宽。会根据width自动计算出相应尺寸 number 必须
progress 进度 number，0-100范围 非必须
strokeColor 进度条颜色 {
 background: string,
 foreground: string
} 		非必须。 背景色默认'rgba(255,255,255,0.3)'， 前景色默认'rgba(255,255,255,0.8)'