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
; <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=stylesdial 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)' |