RN中native-echarts组件加入节点点击事件并传值

本博主是个菜鸟，只是找不到如题的相关解决方案，所以写了个文分享下，如果有更好的解决方案麻烦分享给我下，谢谢~不喜勿喷

写完觉得有点啰嗦，但是不啰嗦，又怕不详细，所以回来补充一句，其实很简单，如果嫌烦的话，直接看有截图的位置的话就可以了。

遇到一个功能，是将数据绘制为折现图并且显示出来，于是找到了一个demo，demo原文地址如下：http://blog.csdn.net/sinat_17775997/article/details/71126857；

根据这个demo教程，使用native-echarts 成功绘制出了一个简单的折线图。

绘制出折线图之后，查了下native-echarts的教程，没找到点击事件的使用方法，后来只能自己去看组件内部，发现是将HTML5中的Echarts封装在Webview中的，想起了Echarts中的点击事件的使用方法，就尝试了下。

不啰嗦，直接说重点，先找到放组件的文件夹node_modules，其下的native echarts文件夹中src->components->Echarts中有个index.js，这个JS文件就是组件放置webview的地方，你可以看到此文件的webview中使用了injectedJavaScript，这个是设置在网页加载之前注入一段JS代码。

顺势找到需要注入的代码文件，就是index.js同级下的文件:renderChart.js，打开之后就会发现一段HTML的代码，和Echarts的代码基本同样，在这里就给节点加点击事件了。代码如下图红框处：

至此，你点击折线图的节点就会有点击事件。注意事项：节点小的话，点击不到，会不灵，所以最好把节点放大些，就是在Echarts所需数据的series中设置symbolSize的值，默认是4，调到10以上稳一些。还是不清楚怎么设置节点大小的，可以百度echarts的symbolSize的使用方法。

点击事件加上之后，就是将Webview的值传出去，传到我们需要展示的页面上。这里是百度了Webview和RN的交互，通过实验后，发现其实很简单。使用webview自带的两个方法就可以了，网上的讲解的交互都有点复杂了，也可以说很详细，只是对于我们需要的功能来说，复杂了。

主要使用onMessage和postMessage两个自带的方法即可。代码如下：

首先，在我们自己写的页面（展示折线图的自定义的页面）上加入一个自定义的方法，图中的 2 处，是自己定义的方法，在 1 处自己定义一个类似于callBack的回调函数。额，我多余的解释下，1处是获取到2处的方法，然后将方法存在自定义的那个橘黄色的变量名中，推入了props里，传到组件里获取。

然后在Echarts文件夹中的index.html（前面说了路径的），加入下方红框中的代码：           

在Echarts文件夹中的renderChart.js中间加入红框中的代码即可。注意：那个params.componentType的参数只是我做测试用的，你可以根据自己的需要传值，点击节点时返回值基本都在params中，具体关于params中参数的意思看下echarts官方的文档吧，我就不说了，太多了.....

至此，点击节点接可以获取到数据了，我的这个测试代码里，就是alert出一个“ceshiseries”，这个series就是折线图返回的那个值，即params.componentType。