react-native-gradient-loading

运行效果

• IOS

• Android

安装

• npm: npm install react-native-gradient-loading --save
• Yarn: yarn add react-native-gradient-loading

link

• 此组件依赖于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: 0, y: 0 } | 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 | 是否是有动画加载

License

• MIT

如有问题加群:397885169