React Native 利用webView 加载echars图表不显示问题

最新推荐文章于 2021-05-26 06:06:50 发布

weixin_33794672

最新推荐文章于 2021-05-26 06:06:50 发布

阅读量587

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 移动开发 ViewUI

原文链接：https://yq.aliyun.com/articles/639138

本文分享了一种使用WebView加载ECharts图表的方法，并解决了初次加载不显示的问题。通过注入JavaScript进行强制刷新，最终实现图表的正常展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下效果图吧

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 帮我解决了很多问题，连连支付啊，七陌客服聊天系统啊，图表啊等。也节省了好多时间。
时间够的话还是要去做下原生集成............