前序
因项目需求需要使用React-native封装一个特殊形状的进度条。网上大神封装好的进度条都是圆形或者长条的进度条，所以只能自己仿照着封装一个。
效果图
QQ20180906-160914@2x.png
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值）：
QQ20180906-162005@2x.png
Path的组合
这次的盾牌进度条其实是由3个模块组合而成的，一个是外圈的阴影，另一个是中间固定颜色的路径，最后一个是根据进度条的数值绘制出来的路径。其中后面两个Path是重合的关系，所以两者的路径是相同的。
最后根据设计师提供的SVG文件组合出一个完整的图形。
QQ20180906-165102@2x.png
最外层进度条的控制
根据react-native-svg提供的属性中我们将会使用到strokeDasharray属性来控制进度条的变化。从上面导出的SVG文件图片我们可以看到Stroke-dasharray这个属性。后面的1256为虚线的值，前面335为实线的值，我们只需要控制前面一个值得变化就可以实现进度条的效果了。
QQ20180906-165011@2x.png
暴露出相应的属性
| 属性 | 描述 |
|---|---|
| style | 样式 |
| fill | 进度值 |
| rate | 动画执行时间（代表着速度的意思） |
| onAnimationComplete | 动画结束后回调函数 |
| gradientStartColor | 渐变开始颜色 |
| gradientEndColor | 渐变结束颜色 |
| startTransparent | 起始透明度 |
| endTransparent | 终止透明度 |
| dashOffset | 进图条填充一圈的偏移量（实线） |
| children | 内部视图 |
| progressWidth | 进度条宽度 |
| innerPath | 内圈路径 |
| path | 外圈路径 |
进度条动画
在该进度条View上层再封装一层动画View，内部使用Animated控制着fill值的变化，这样就可以实现进度条的动画。
QQ20180906-170051@2x.png
结束语
本篇只是阐述了实现该进度条的大致思路，很多的细节方面阐述的还不是很清楚，欢迎留言交流。
