一步一步实现 React-Native 绘制股票K 线

作者: liuyun333 | 来源:发表于2018-07-12 18:48 被阅读138次

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

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

（1）.在绘图时，最外层需要一个 SVG，相当于网页中的容器<DIV>,只有在最外层有 SVG 容器时，绘制的其它样式才会有效。注意：SVG 需要设置高宽。

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

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

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

1.组件如何细分？

2.如何实现交互？

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

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

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

蜡烛图

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

MA5

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