native-echarts填坑记录

问题描述

native-echarts是基于echart为RN项目开源的图表库，使用过程中碰到如下两个大坑

1. android在release模式下图表无法展示
2. echats是基于canvas绘制的，但基于react-native-view-shot生成的快照无法显示canvas绘制的内容

备注：

1. RN官方提供的CameraRoll可以生成快照，但仅仅支持iOS平台， android平台使用第三方react-native-view-shot生成快照。
2. 朋友推荐了一个RN图表库react-native-charts-wrapper，比native-echart的start数和fork都比较多，更为好的是更新频繁，尚未关闭的issue也少。可以试试

1. android在release模式下图表无法展示

原因

native-echarts的工作方式是使用WebView加载图表，在该库中加载的html文件放在本地，当android打包时将.html文件跟图片打包到一块打包到原生里面，造成无法RN无法读取到html文件

方案1

该库中issue中提供的一种解决方式
改动比较大，既改动库的源码，也改动自己项目的原生部分，不建议采取

方案2

WebView加载html有三种方式，分别为：本地文件、远程文件、html字符串。该库使用的是本地文件方式，下面分别使用另外两种方式操作：

1. 远程文件：将html文件放到公司服务器，这样改动最小，但图表显示速度较慢
2. html字符串：将html文件的内容写在字符串内，工作量虽然比远程文件的方式稍微大一点，但图表显示速度快

这三种加载方式都要不要修改库里面提供的html内容，尤其是head标签里面的内容不要随便删除，不然图表可能显示异常

方案3

不依赖于native-echarts库，自己用纯js写一个图表，然后用WebView加载。我的需求是绘制饼状图，所以我只能提供一个饼状图js代码，其他的自己找吧。
这种方式比较随缘，就看你能不能找到相应图表的js代码

2. react-native-view-shot快照无法显示canvas绘制的图表

原因：还不清楚，有了解的朋友辛苦留个言一块探讨一下

方案

用victory-native代替echatts绘制图表，victory-native使用的是svg绘制，不影响快照的显示

备注

victory-native的使用有些麻烦，建议认真看下文档，尤其版本问题

疑问

1. 为什么在android上我没有使用纯js绘制的，而是使用较为麻烦的victory-native

   因为在android上使用纯js绘制造成当前RN页面的背景图很慢才能显示出来，体验太差。是因为在纯js绘制造成线程阻塞(perf monitor显示20 dropped so far)，iOS没有这个原因是因为机器性能好。