React Native 盾牌形进度条

前序

因项目需求需要使用React-native封装一个特殊形状的进度条。网上大神封装好的进度条都是圆形或者长条的进度条，所以只能自己仿照着封装一个。

效果图

[email protected]

react-native-svg

SVG用于描述二维矢量图形的一种图形格式。
react-native-svg提供一个SVG接口，以便在iOS和Android上运行。
常用的类如下表：

类型	描述
SVG	承载绘图区域
Circle	园
G	包裹块
LinearGradient	线性渐变
RadialGradient	角度渐变
Line	线条
Polyline	多段线
Path	路径
Polygon	多边形
Rect	矩形
Text	文本信息
TextPath	文本路径
Stop	效果停止位置
Defs	定义引用元素

常用属性如下表：

类型	描述
fill	填充颜色
fillOpacity	填充透明度
fillRule	填充规则
stroke	外边框属性,可以定义颜色
strokeWidth	外边框宽度
strokeOpacity	外边框透明度
strokeLinecap	路径结束位置的形状
strokeLinejoin	元素的顶点处使用的联接类型
strokeDasharray	用于创建虚线
strokeDashoffset	虚线的偏移量
rotate	旋转角度
scale	比例
x,y,cx,cy等	表示坐标

进度条的实现

Path的获取

使用SVG可以绘制出任意形状的图形，关键是要获取到想要绘制图形的路径（Path）。越复杂的图形其Path越长，所以遇到复杂图形的时候还是放弃自己计算Path吧。我们可以让视觉设计师将绘制出来的图形导出其SVG文件，从该SVG文件中我们可以获取到想要的Path。
设计师导出的部分SVG文件如下（从该SVG文件中，我们可以获取到Path和LinearGradient值）：

[email protected]

Path的组合

这次的盾牌进度条其实是由3个模块组合而成的，一个是外圈的阴影，另一个是中间固定颜色的路径，最后一个是根据进度条的数值绘制出来的路径。其中后面两个Path是重合的关系，所以两者的路径是相同的。

最后根据设计师提供的SVG文件组合出一个完整的图形。

[email protected]

最外层进度条的控制

根据react-native-svg提供的属性中我们将会使用到strokeDasharray属性来控制进度条的变化。从上面导出的SVG文件图片我们可以看到Stroke-dasharray这个属性。后面的1256为虚线的值，前面335为实线的值，我们只需要控制前面一个值得变化就可以实现进度条的效果了。

[email protected]

暴露出相应的属性

属性	描述
style	样式
fill	进度值
rate	动画执行时间（代表着速度的意思）
onAnimationComplete	动画结束后回调函数
gradientStartColor	渐变开始颜色
gradientEndColor	渐变结束颜色
startTransparent	起始透明度
endTransparent	终止透明度
dashOffset	进图条填充一圈的偏移量（实线）
children	内部视图
progressWidth	进度条宽度
innerPath	内圈路径
path	外圈路径

进度条动画

在该进度条View上层再封装一层动画View，内部使用Animated控制着fill值的变化，这样就可以实现进度条的动画。

[email protected]

结束语

本篇只是阐述了实现该进度条的大致思路，很多的细节方面阐述的还不是很清楚，欢迎留言交流。