native react 折线图_一步一步实现 React-Native 绘制股票K 线

在 iOS 开发中，绘制 K 线图时，我们需要使用的画布,然后在画布上一步一步绘制 K 线，并实现各种交互，那么，在 RN 中，我们如果实现股票 K 线的绘制呢？

其实，在 RN 中，绘制 K 线的方法和原生方法类似，也是通过画布进行绘制。首先，我们需要导入 RN 中的绘图工具:react-native-svg,不熟悉的大家可以到官方网站上查看使用方式，通过这个工具，我们可以绘制各种样式。下面，我跟大家讲下使用这个库需要注意的地方。

(1).在绘图时，最外层需要一个 SVG，相当于网页中的容器

,只有在最外层有 SVG 容器时，绘制的其它样式才会有效。注意：SVG 需要设置高宽。

(2).因为在 RN 开发中,我们希望组件化开发，但是如果使用 SVG 绘图，并把每个小组件分的很细，在每个组件上都增加 SVG 的话，在 Android 中会报错。那么，难道我们在开发中所有 SVG组件都写在一起？当然不会，我们可以通过方法返回的方式，每个方法实现一个组件，最后返回一个数组，在最顶层的 SVG 下调用方法即可。

(3).所有自组件需要设置单独的 Key，如果要做移动等效果，不设置 Key,会发现无效移动等问题。

前面这几个问题，是使用 SVG 时需要注意的地方，下面，我简单介绍下在绘制 K 线时遇到的问题。

1.组件如何细分？

2.如何实现交互？

针对上面问题，我说下我的解决方法，如有不对或大家觉得有更好的方案，歡迎提出。

首先，第一个问题：组件如何细分？

了解股票 K线图的我相信，你们第一个先想到蜡烛图(图:蜡烛图),对，我第一个也是先想到了封装一个这个组件，因为在 K 线图中，展现最多的当然就是这个了，通过这个基本可以实现很多的功能了。在这个组件中，我们需要使用到的是 SVG 中的

蜡烛图

其次，我们该想到的是各种线条的绘制，在绘制线条时，我首先想到的是每两个点绘制一条线，当我这样实现后发现，这样实现的是两条平滑的直线，而我们通常所看见的 K 线走势图上的线条并不是平滑的直线，所以，通过仔细的查看 SVG 文档，我又发现了在绘制 K 线需要使用到的第三个控件利用这个空间，我们可以绘制五日均线(MA5)，十日均线(MA10)等。

MA5

最后，当然是如何绘制文本拉，因为在 K 线图中，如果我们只有图表，没有数据，那用户也不清楚点击的是何处。这点 SVG 早就想到了，所以为我们提供了这个控件，需要注意此 Text和 RN 自带的 Text 的区别。SVG 中，Text 无法设置背景颜色，如需设置背景颜色,需要在底层嵌套一个 Rect，通过设置 Rect 来达到背景色的效果。其次，在 SVG 中，使用 Text时，我们需要设置坐标。

带背景色的文本框

好，下面我说下我实现交互的方式。在原生开发时，我们知道，有各种各样的手势，我们可以直接添加并使用，那么，在 RN中，是否和原生一样具有各种手势呢？答案是肯定的，我们可以使用PanResponder来打到我们想要的手势，那么在绘制 K 线需要那些手势呢？

(1)    .滑动手势，通过左右滑动在展现不一样的数据。

(2).长按手势，通过长按手势来实现选中的效果。

(3).捏合手势，通过捏合手势实现放大缩小的效果。

上面各种手势我就不一一介绍了，大家有疑问的话歡迎加入 QQ 群组821255571，大家一起讨论。

效果图：

日 K

选择某个时间段

网络加载

分时线：

分时图

整体效果图