react native中使用echarts
开发平台:mac pro
node版本:v8.11.2
npm版本:6.4.1
react-native版本:0.57.8
最近在使用react native进行app的开发工作,rn开发的内容会与原生app混合,在一些使用场景下遇到了一些问题
使用场景:每日收益与每月收益的折线图统计
在pc/h5端的开发工作中,图标类的开发使用echarts/f2等三方工具都是比较常见的了,在react native中,没有了DOM的概念,因此在react native中使用了一些三方的图标库
native-echarts,github地址。
需要更换echarts版本的方法
native-echarts内部使用了react native中的webview进行图表的展示,本质上只是传入数据,通过echarts渲染出静态的HTML文档,然后通过webview展示出来而已。
netive-echarts内部使用的echarts版本为v3.2.3"版本,如果需要更高级的echarts版本,只需要更换src/components/Echarts/echarts.min.js文件以及tpl.html文件里的内容即可。
使用时遇到的问题: 在debug模式下,真机以及测试机器上图标正常显示,打包成android的apk文件后图表都不显示
解决方式:
1:找到native-echarts/src/components/Echarts/tpl.html文件,复制到android/app/src/main/assets这个目录下面,如果文件夹不存在就新建一个即可。
2:找到文件native-echarts/src/components/Echarts/index.js,修改为一下内容
import React, { Component } from 'react';
import { WebView, View, StyleSheet, Platform } from 'react-native';
import renderChart from './renderChart';
import echarts from './echarts.min'; export default class App extends Component { constructor(props) {
super(props);
} // 预防过渡渲染
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))
}
} render() {
return (
<View style={{flex: 1, height: this.props.height || 400,}}>
<WebView
ref="chart"
scrollEnabled = {false}
injectedJavaScript = {renderChart(this.props)}
style={{
height: this.props.height || 400,
backgroundColor: this.props.backgroundColor || 'transparent'
}}
scalesPageToFit={Platform.OS !== 'ios'}
originWhitelist={['*']}
source={{uri: 'file:///android_asset/tpl.html'}}
onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
/>
</View>
);
}
}
可能存在的问题????
同时,在后续的react native版本中,webview即将从react native内部移除出去,改为三方包安装使用。参考:
https://reactnative.cn/docs/webview/#mixedcontentmode
https://github.com/react-native-community/discussions-and-proposals/issues/6
因此,在后续新版本中使用native-echarts,可能会使用不了,因此建议fork一个稳定的版本到自己的github上,或者在后续自己采用react-native-webview + echarts的方式自由的组合版本,使用起来更加自由。
参考文档:
https://github.com/somonus/react-native-echarts/issues/47
https://github.com/somonus/react-native-echarts/issues/32
https://github.com/somonus/react-native-echarts/issues/122
react native中使用echarts的更多相关文章
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
- react native中的欢迎页(解决首加载白屏)
参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- react native中一次错误排查 Error:Error: Duplicate resources
最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...
- 在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- react native中如何往服务器上传网络图片
let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...
随机推荐
- [Kali_Metasploit]db_connect创建连接时无法连接的解决方案
问题1复现路径: postgresql selected, no connection 第一步: db_connect postgres:toor@127.0.0.1/msfbook 连接成功不需要进 ...
- Mysql主从方案的实现
Mysql主从方案介绍 mysql主从方案主要作用: 读写分离,使数据库能支撑更大的并发.在报表中尤其重要.由于部分报表sql语句非常的慢,导致锁表,影响前台服务.如果前台使用master,报表使用s ...
- spring boot -Properties & configuration
72. Properties & configuration72.1 Automatically expand properties at build timeRather than hard ...
- app后端设计(8)-- 数据库分表
当项目上线后,随着用户的增长,有些数据表的规模会以几何级增长,当数据达到一定规模的时候(例如100万条),查询,读取性能就下降得很厉害,这时,我们就要考虑分表. 更新表数据时会导致索引更新,当单表数据 ...
- win7 telnet命令无法开启的解决方案(不是内部命令或外部命令)
如果你想在win 7上直接使用 telnet命令,却不能开启那怎么办呢?记得在Wingdows XP上telnet都是已经安装好的,直接就可用,但是Win7是没有这个功能的,都需要后来自己安装的,下面 ...
- 18.app后端如何实现LBS
移动互联网,除了一直在线这个特点外,还有一个重要特点,能定位到手机的位置.查找附近的人,附近的餐馆等服务,以及大量的o2o应用, 都需要使用LBS(Location Based Services).那 ...
- 区分IE8 、IE9 、IE10的专属css hack
想让IE8及以下的浏览器实现同样的效果,且不希望使用css3pie或htc或条件注释等方法时,可能就会需要用到IE8和IE9的专属css hack了. .test{ /* 1. */ color:#0 ...
- Python eval 函数妙用
eval 功能:将字符串str当成有效的表达式来求值并返回计算结果. 语法: eval(source, globals, locals) -> value 参数: source:一个Python ...
- Postman 使用详解
转自: http://blog.csdn.net/flowerspring/article/details/52774399 Postman 使用详解 阅读 6754收藏 3022016-6-9 作者 ...
- 【NOIP2011】 聪明的质监员
小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n个矿石,从 1 到n逐一编号,每个矿石都有自己的重量wi以及价值vi.检验矿产的流程是: 1. 给定 m个区间[Li,Ri]: 2. ...