React Native 利用webView 加载echars图表 不显示问题
先看下 效果图吧
之前用 第三方组件 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的系统偏好设置,然后勾选开发者
如果是真机的话,打开设置 - 找到 safari --高级 - 开启web检查器,javascript
然后打开safari 开发者选项
打开后发现并没有报错,这下奇怪了 什么原因导致的呢?后来刷新下 图表出现了
既然首次不出现 那就用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 帮我解决了很多问题,连连支付啊,七陌客服聊天系统啊,图表啊等。 也节省了好多时间。
时间够的话 还是要去做下原生集成............
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
2-1 类的创建
创建一个简单的表示矩形的Rectangle类,满足以下条件: 1、定义两个成员变量height和width,表示矩形的长和宽,类型为整型 2、定义一个getArea方法,返回矩形的面积 3、定义一个getPerimeter方法,返回矩形的周长 4、在main函数中,利用输入的2个参数分别作为矩形的长和宽,调用getArea和getPermeter方法,计算并返回矩形的面积和周长 输入: 输入2个正整数,中间用空格隔开,分别作为矩形的长和宽,例如:5 8 输出: 输出2个正整数,中间用空格隔开,分别表示矩形的面积和周长,例如:40 26 import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in = new Scanner(System.in); int height = in.nextInt(); int width = in.nextInt(); Rectangle r = new Rectangle(height, width); System.o...
- 下一篇
elasticsearch 支持中英文搜索和混合搜索
环境: ubuntu16.04 安装: elasticsearch 5.22 1. 第一步,安装javaapt-get install default-jreapt-get install default-jdk 2.第二步,安装elasticsearch. 5.22wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.2.2.debdpkg -i elasticsearch-5.2.2.deb 3.启动服务systemctl daemon-reloadsystemctl enable elasticsearchsystemctl restart elasticsearch 碰到问题:[2018-07-02 18:36:32,700][INFO ][node ] [Captain Fate] version[1.7.3], pid[25545], build[NA/NA][2018-07-02 18:36:32,701][INFO ][node ] [Captain Fate] initial...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Docker安装Oracle12C,快速搭建Oracle学习环境