React Native 利用webView 加载echars图

先看下 效果图吧

IMG_2273.PNG IMG_2272.PNG

之前用 第三方组件 native-echarts 也实现了雷达图，但是比较复杂，而且 android 和ios 上引入tpl.html文件也不一样，而且也没有上图中的渐变，反正效果不是很好。
我算是比较幸运的，因为我们h5有做了一个版本出来，那么就可以让 后台 通过模板的形式，返回一个 页面，就可以通过webView 加载这个url 。

还有一种方式就是 自己画图，react-native-art
Android默认就包含ART库，IOS需要单独添加依赖库。具体怎么引入可参考
iOS添加 RT库
案例
这个绘图api 网上资料也不多，时间充足的情况下 可以研究下...

下面说下webView 加载echars图表 不显示问题
首先要定位下问题 ：
打开safari 调试下webview看有没有报错，
介绍下 safari 调试app 的webview:
打开safari的系统偏好设置，然后勾选开发者

image.png
如果是真机的话，打开设置 - 找到 safari --高级 - 开启web检查器，javascript IMG_2274.PNG
然后打开safari 开发者选项
image.png

打开后发现并没有报错，这下奇怪了 什么原因导致的呢？后来刷新下 图表出现了

image.png

既然首次不出现 那就用webview 强制刷新下：利用webview 的 onLoadEnd

...  ....this.onLoadEnd = this.onLoadEnd.bind(this);

  if (!this.state.runNum) {  //这里控制下防止不停的刷新。
      let script = `location.reload()`;
      this.webView.injectJavaScript(script);
   
      this.setState({ runNum: true })
    }

.........
  <WebView
                source={{ uri: this.state.charsUrl }}
                startInLoadingState={true}
                javaScriptEnabled={true}
                mixedContentMode={'always'}
                dataDetectorTypes={'all'}
                ref={webView => this.webView = webView}
                scalesPageToFit={true}
                scrollEnabled={true}
                injectedJavaScript={this.state.injectedJavaScript}
                onLoadEnd={this.onLoadEnd}
                style={{ widht: screenWidth, height: 280,marginTop:10 }}

然后问题解决了，
目前这个webview 帮我解决了很多问题，连连支付啊，七陌客服聊天系统啊，图表啊等。 也节省了好多时间。
时间够的话 还是要去做下原生集成............