- IOS
- Android
- 此组件依赖于react-native-svg,需要安装 react-native-svg,
运行 yarn add react-native-svg, 运行react-native link react-native-svg
- 共有属性(即为Loading 属性)
名字 | 默认值 | 类型 | 描述 |
---|---|---|---|
size | 100 | number | svg大小/画布的宽高/圆环的直径 |
speed | 1200 | number | 动画时长 |
linearGradientColor | ['red', 'blue'] | array | 渐变颜色 |
start | { x: 0, y: 0 } | object | 渐变开始坐标 |
end | { x: 100, y: 100 } | object | 渐变结束坐标 |
ringWidth | 6 | number | 圆环的宽度 |
showBackCircle | true | bool | 是否显示底色 |
backCircleColor | '#eee' | color | 底部圆环颜色 |
direction | 0 | number | 0 顺时针, -1 为逆时针 |
strokeLinecap | 'round' | ['square', 'round'] | 是否圆角描边 |
- Load 属性
名字 | 默认值 | 类型 | 描述 |
---|---|---|---|
initialNum | 0 | number | 动画开始数值 |
targetNum | 100 | number | 最终显示数值 |
startDirection | 'right' | ['top', 'right', 'bottom', 'left'] | 起始位置 |
textStyle | undefined | style | 文本样式 |
textSpeed | 10 | number | 文字步进 此值尽量小 |
percentage | 0.8 | number | 百分比,取值为 0~1 |
useAnimation | true | bool | 是否是有动画加载 |