react-native native-echarts 图表趴坑指南

代码我已经托管到 github上，有需要的小伙伴自行下载查阅~

react-native 日常踩坑 下面我们探讨下native-echarts经常会踩到的坑

ios release运行不显示图表，一片空白

在 WebView 中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）。
注意如果是载入html代码，则需要设置originWhitelist，
比如可以设为["*"]来允许运行本地代码。    
打开node_modules\native-echarts\src\components\Echarts\index.js文件,
并在WebView加上originWhitelist={['*']}即可修复

演示出现了滚动条，并且拖动时就会出现空白,双击会缩小问题

打开node_modules\native-echarts\src\components\Echarts\index.js文件，
修改WebView的scalesPageToFit={true}

解决频繁刷新问题

打开node_modules\native-echarts\src\components\Echarts\index.js文件

shouldComponentUpdate(nextProps, nextState) {     
   const thisProps = this.props || {}       
   nextProps = nextProps || {}      
   if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {  
          return true        
   }       
   for (const key in nextProps) {      
      if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
       // console.log('props', key, thisProps[key], nextProps[key])           
       return true           
      }     
   }      
   return false   
 }   
 componentWillReceiveProps(nextProps) {      
   if(nextProps.option !== this.props.option) {
     // 解决数据改变时页面闪烁的问题           
     this.refs.chart.injectJavaScript(renderChart(nextProps,false))      
   }   
 }

android 打包后，所有的图表显示不出来

1./node_modules/native-echarts/src/components/Echarts/ 目录下的tpl.html 拷贝一份 
2./android／app/src/main 创建 assets文件夹
3.把第一步拷贝的文件放到第二步创建的assets文件夹下 
4.进入Echarts文件(/node_modules/native-echarts/src/components/Echarts/index) 
把WebView的source改为 source={{uri:'file:///android_asset/tpl.html'}}