ReactNative进度条：圆形、条形、刻度......
react-native-progress
Props Dial
ReactNative进度组件：圆形、条形、刻度......，带动画。
Getting started使用该组件前，你需要先安装 react-native-svg
$ npm install react-native-svg --save
$ npm install react-native-wf-progress --save
圆形进度条 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 | 备注 | 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)' |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
