react-native中使用Echarts，自己使用WebView封装Echarts经验
1.工作中遇到的问题
我们在使用react-native肯定遇到过各种奇葩的问题，比如引入Echarts时候莫名报错，但是Echarts官网明显告诉我们可以懒加载的，这是因为基本上js大部分原生的组件库都不支持React-Native，直接引用都会报"undefined is not an object (evaluating 'ua.match')" when importing an incompatible (browser) library.
2.经过调研得知react-native的WebView可以解决这个问题
有时候可以使用 WebView 弥补一些 ReactNative 内置的组件实现不了的东西，我们可以借助 HTML 来完成，毕竟 HTML 有丰富的工具可以用。例如要想在 ReactNative 里展示图表，原生自带的组件则没办法实现，其他的图表组件都是基于 react-native-svg 实现的，展示效果目前还不足人意，如果仅仅是展示，不在乎图表的各项数据和动态操作，这里也介绍几个小巧的图表插件，react-native-pathjs-charts，victory-native ( 展示效果丰富，极力推荐，名字有点随意，导致很多人不知道这个插件 )。但是如果需要echarts或者highChart这些丰富的功能，这个时候 HTML 则有一大堆图表工具可以使用。
那我们接下就教大家如何一步一步封装自己的echarts组件。
3.封装echarts
假设我有一个本地的react-native目录如下
Demo/
android/
ios/
App.js
index.js
packege.json src/
components/
chart/
view
...
我们在src/components/chart目录下新建两个文件，一个叫chart.html,一个叫chartComponent.js
编写chart.html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>测试文件</h1>
</body>
</html>
然后编写chartComponent.js
import React ,{Component} from 'react';
import {
View,
Text,
ScrollView ,
WebView,
Dimensions,
StyleSheet,
Platform
} from 'react-native';
export default class SelfEChart extends Component {
render() {
return (
<WebView
source={require('./chart.html')} //加载的html资源
/>
)
}
}
接下来引入你的SelfEchart组件展示到你的页面中，如果出现刚才的测试文件，那么你的webview就是起效果了。
我们开始改造我们的chart.html使它正式成为平时我们写echarts的样子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
</style>
</head>
<body>
<div id="main"></div> <script>
/* echarts.min.js代码拷贝到这里 */
</script>
</body>
</html>
在使用html加载好我们的html文件以及文件内部的echarts.min.js后需要初始化echarts插件，这个时候需要用到webview的 injectedJavaScript 属性，但是该属性必须是一段js的字符串，我们先将需要执行的js字符串编写好如下：
/*在WebView加载外部html后执行的js，主要是初始化echart图表*/
function renderChart(props) {
const height = `${props.height || 400}px`;
const width = props.width ? `${props.width}px` : 'auto';
return `
document.getElementById('main').style.height = "${height}";
document.getElementById('main').style.width = "${width}";
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(${toString(props.option)});
//这个自定义的message主要是监听webview组件传递来的数据变化的，假设图表数据变化，我们需要更新echart的option，使的
//图表的变化不间断，可以实现实时监控的效果，以至于不闪屏
window.document.addEventListener('message', function(e) {
var option = JSON.parse(e.data);
myChart.setOption(option);
});
`
}
我们注意到上述代码有个toString方法，主要是将option对象转成字符串，因为JSON.stringify()方法本身会忽略函数属性，所以toString队JSON.stringify做了判断，代码如下
function toString(obj) {
let result = JSON.stringify(obj, function(key, val) {
if (typeof val === 'function') {
return `~--demo--~${val}~--demo--~`;
}
return val;
});
do {
result = result.replace('\"~--demo--~', '').replace('~--demo--~\"', '').replace(/\\n/g, '').replace(/\\\"/g,"\"");
} while (result.indexOf('~--demo--~') >= 0);
return result;
}
所要的东西都准备好了，家下来开始在webview组件内引入在chart.html加载后需要执行的js代码了
export default class SelfEChart extends Component {
render() {
return (
<WebView
source={require('./chart.html')} //加载的html资源
injectedJavaScript = {renderChart(this.props)} //在html内执行js代码，必须是字符串
/>
);
}
}
option当然是父组件传递过来的，我们也可以指定该图标显示的高度和宽度，以及一些其他的属性，还有就是webview还有一些其他的辅助属性，可以帮组我们优化组件的功能，接下来我们看看完整的charComponent.js的代码
import React ,{Component} from 'react';
import {
View,
Text,
ScrollView ,
WebView,
Dimensions,
StyleSheet,
Platform
} from 'react-native';
/*获取设备的屏幕宽度和高度*/
const {width, height} = Dimensions.get('window');
function toString(obj) {
let result = JSON.stringify(obj, function(key, val) {
if (typeof val === 'function') {
return `~--demo--~${val}~--demo--~`;
}
return val;
});
do {
result = result.replace('\"~--demo--~', '').replace('~--demo--~\"', '').replace(/\\n/g, '').replace(/\\\"/g,"\"");
} while (result.indexOf('~--demo--~') >= 0);
return result;
}
/*在WebView加载外部html后执行的js，主要是初始化echart图表*/
function renderChart(props) {
const height = `${props.height || 400}px`;
const width = props.width ? `${props.width}px` : 'auto';
return `
document.getElementById('main').style.height = "${height}";
document.getElementById('main').style.width = "${width}";
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(${toString(props.option)});
window.document.addEventListener('message', function(e) {
var option = JSON.parse(e.data);
myChart.setOption(option);
});
`
}
/**
* 通过WebView封装react-native不支持的插件，本次封装echarts
*
* 该组件需要的props
* option 必填，为ECharts配置属性option，详细配置参考官网EChartshttp://echarts.baidu.com/option.html#title
* width 不必填，为图表的宽度
* height 不必填，为图表的高度
*
*
*/
export default class SelfEChart extends Component {
constructor(props) {
super(props);
this.setNewOption = this.setNewOption.bind(this);
}
componentWillReceiveProps(nextProps) {
if(nextProps.option !== this.props.option) {
this.refs.chart.reload();
}
}
setNewOption(option) {
//postMessage会触发刚才js中的message监听方法，使得图表刷新option配置
this.refs.chart.postMessage(JSON.stringify(option));
}
render() {
/**在安卓下加载的资源跟ios不同，需要做兼容处理，
* 就是将当下的chart.html拷贝到android/app/src/main/assets
*/
const source = (Platform.OS == 'ios') ? require('./chart.html') : { uri: 'file:///android_asset/chart.html' }
return (
<View style={{width:this.props.width || width,flex: 1, height: this.props.height || 400,}}>
<WebView
ref="chart"
scrollEnabled = {false}
style={{
height: this.props.height || 400,
backgroundColor: this.props.backgroundColor || 'transparent'
}}
source={source} //加载的html资源
scalesPageToFit={Platform.OS !== 'ios'}
injectedJavaScript = {renderChart(this.props)} //在html内执行js代码，必须是字符串
/>
</View>
);
}
}
到此为止，我们的echar组件已经封装好了，接下来我们看看怎么使用
import React ,{Component} from 'react';
import { View, Text,ScrollView } from 'react-native';
import SelfEChart from '../../components/chart/chart'
export default class ListScreen extends React.Component {
componentDidMount(){
/**
* 连续不间断刷新图标demo
*/
setInterval(()=>{
let data = [5, 20, 36, 10, 10, 20].map((v)=>{
return Math.random()*v
})
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data
}]
};
/**普通图表刷新通过改变state内部的option实现，缺点就是组件不断更新，导致图表组件重头开始渲染，没有连贯效果
* 在chartComponent里面封装的setNewOption方法，
* 目的是为了调用myChart.setOption(option)
* 达到不抖屏不更新state刷新图表
* */
this.refs.charts.setNewOption(option)
},2000)
}
render() {
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
return (
<ScrollView>
<View style={ { flex: 1, justifyContent: 'center', alignItems: 'center'} }>
<Text>ListScreen!</Text>
<SelfEChart
ref="charts"
option={option}
/>
</View>
</ScrollView>
);
}
}
最好附上已经全部搭建好的react-native框架地址：https://github.com/jiangzhenfei/react-native-demo
react-native中使用Echarts，自己使用WebView封装Echarts经验的更多相关文章
- react native中的聊天气泡以及timer封装成的发送验证码倒计时
今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以 ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- 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中使用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 ...
随机推荐
- mysql8基本配置，差点被各种坑蒙圈
1. 下载免安装版mysql地址 https://dev.mysql.com/downloads/mysql/ 2. 基本配置 (1)解压zip包,将bin目录添加到环境变量 (2)在mysql根目录 ...
- 第三部分shell编程3（shell脚本编写1）
做监控和备份最多 1. shell脚本是什么它是一种脚本语言,并非编程语言可以使用一些逻辑判断.循环等语法可以自定义子函数是系统命令的集合shell脚本可以实现自动化运维,大大增加我们的工作效率 第一 ...
- java-实用的sql语句
一.在数据库创建表格的SQL语句 1,创建一个link表格,包含属性:lid 主键,title 标题, imgpath 图片地址 , url 网址 , info 说明, isshow 显示1 ...
- BZOJ3139/BZOJ1306 HNOI2013比赛/CQOI2009循环赛（搜索）
搜索好难啊. 1.对于每个分数集合记忆化. 2.某人得分超过总分,剪枝. 3.某人之后全赢也无法达到总分,剪枝. 4.每有一场比赛分出胜负总分会多三分,而平局则会多两分.某人的分出胜负场次或平局场次超 ...
- Android SDK Manager下载，解决方案
一.Windows 平台 在C:\Windows\System32\drivers\etc\hosts文件.添加一行:74.125.237.1 dl-ssl.google.com 二.Li ...
- URAL1297：Palindrome——题解
http://acm.timus.ru/problem.aspx?space=1&num=1297 https://vjudge.net/problem/URAL-1297 给定一个字符串,求 ...
- Python3简单入门
在Mac和Linux上运行Python时,请打开终端,然后运行python3 Mac OSX 正确地同时安装Python 2.7 和Python3: http://www.jianshu.com/p ...
- SpringAOP简介
AOP(Aspect Orient Programming) --- 面向切面编程 将分散在各个业务逻辑中的相同代码 通过 “横向”切割方式抽取到独立模块中 方式抽取到独立模块中;[它针对的是程序运行 ...
- mybaties实体的 Mapper.xml文件中自定义sql时模糊查询的写法
<select id=selectByNameLike" parameterType="string" resultMap="BaseResultMap ...
- ContextLoaderListener和Spring MVC中的DispatcherServlet加载内容的区别【转】
原文地址:https://blog.csdn.net/py_xin/article/details/52052627 ContextLoaderListener和DispatcherServlet都会 ...