ReactNative 绘制渐变折线图

我们在做K线图，或者趋势图的时候，经常会遇到各种各样的麻烦。这篇文章，我给大家讲下我做折线图的思路。
先看下渐变折线图的效果，我没标刻度，只展示折线图：

a1.gif
整体的大思路：
1.画多边形，（非折线），因为这里需要有填充色的，一条线没法完成，只能是一个封闭的图形；
2.动态的改变多边形的宽度。
大思路其实很简单，做过客户端开发的同学可能很快就能实现，因为客户端有很多绘图的方法和控件。而ReactNative绘图就没那么方便了，我看有朋友用纯代码画过折线图，方法很复杂，还需要计算曲率等问题。我就开始找一些三方库，综合对比，选择react-native-svg,github上有3.5k个start,并且支持iOS和Android。想使用的同学可以看链接，注意iOS工程和安卓工程要做一定的配置。
具体实现方法：
一.画多边形
使用的是svg库里的Polyline（多变形）组件。这里要注意，既要画多边形，还要画上面的那根折线

    <Svg
                        height="200"
                        width="300"
                        style={{ left: 300, position: 'absolute' }}
                    >
                        <Polyline
                            points="0 20,40 5,100 15,150 3,200 20"
                            stroke="black"
                            strokeWidth="2.5"
                        />
                        <Polyline
                            points="0 20,40 5,100 15,150 3,200 20,200 50,0 50,0 20"
                            fill="yellow"
                        />
   </Svg>

折线要有stroke，多边形要有fill。折线的点要比多边形的点少，因为不用最后去做封闭图形。points的点，是按这样的坐标系来的

坐标系.png
二。渐变展开
这个想法也很简单，动态的改变多边形的width，Animationd中得transform[scaleX:0->1]。让宽度在指定的时间里有0变为1。但是发现这个形变效果有问题，X坐标不是从0开始，而是从中间开始，而且ReactNative还没有属性能控制，详见文章react-native支持transform-origin探索,RN中我们没法改变transform-origin。因此只能曲线救国，将形变的图形一分为二，用右边的向右展开的来做动画。

  <Animated.View style={{
                    height: 200, width: 300 * 2, left: -200, bottom: -300, position: 'absolute', backgroundColor: 'clear', transform: [
                        { scaleX: chartWidth }, // x轴移动
                    ]
                }}>
                    <Svg
                        height="200"
                        width="300"
                        style={{ left: 300, position: 'absolute' }}
                    >

至此，可以达到开始的gif的效果。同时也希望facebook能尽快支持transform-origin属性。
本文Demo地址欢迎各位同行的提问和指正。