android webview 图表,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 })

}

.........

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 帮我解决了很多问题，连连支付啊，七陌客服聊天系统啊，图表啊等。 也节省了好多时间。

时间够的话 还是要去做下原生集成............