react-native-echarts目前是RN开发中使用echarts图表最好的插件了,用法与Echarts完全一致,默认提供了三个属性:

  • option (object): The option for echarts: Documentation
  • width (number): The width of the chart. The default value is the outer container width.
  • height (number): The height of the chart. The default value is 400

  1.首先是最基本的使用:

    

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Echarts from 'native-echarts'; export default class app extends Component {
render() {
const option = {
title: {
text: 'ECharts demo'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
return (
<Echarts option={option} height={300} />
);
}
} AppRegistry.registerComponent('app', () => app);

当自定义tooltip时,由于react-native-echarts外层包裹了一层WebView,所以在配置项的函数内部不能拿到外部的变量

const deviceW = Dimensions.get('window').width / 750
 
option.tooltip.formatter = (params) => {
  return `<div style="width: ${deviceW*690}px; font-size: ${deviceW*26}px;"></div>` // 此处deviceW并不生效,获取不到外部定义的变量
}

  2.改进:

    WebView将图表与外界的变量进行了隔离,只能另想他法,多传入一个属性,将外部变量变成可以供内部使用的变量

    

const deviceW = Dimensions.get('window').width / 750
let chartContext = {
  width: deviceW
}
 option.tooltip.formatter = (params) => {
  return `<div style="width: ${chartContext.width*690}px; font-size: ${chartContext.width*26}px;"></div>` // 此处deviceW并不生效,获取不到外部定义的变量
 }
<Echarts option={option} height={300} chartContext={chartContext} />

// 修改react-native-echarts包代码:
// renderChart.js
 export default function renderChart(props) {
  const height = `${props.height || 400}px`;
  const width = props.width ? `${props.width}px` : "auto";
  const chartContext = props.chartContext
  return `

    document.getElementById('main').style.height = "${height}";
    document.getElementById('main').style.width = "${width}";
    var myChart = echarts.init(document.getElementById('main'));
    var chartContext = ${toString(chartContext)};
    myChart.setOption(${toString(props.option)});
    myChart.on('click', function(params) {
      var seen = [];
      var paramsString = JSON.stringify(params, function(key, val) {
        if (val != null && typeof val == "object") {
          if (seen.indexOf(val) >= 0) {
            return;
          }
          seen.push(val);
        }
        return val;
      });
      window.postMessage(paramsString);
    });
    `
 }

  3.改进:

    以上方案解决了配置项拿不到外部变量的问题,看起来很完美,运行代码也没有什么问题,不过,在项目打包时,又出了问题,图表显示不出来了,很诡异

    原因:打包时,由于自定义属性是手动加的,打包时转换成了简写,不能被识别

  

  

// renderChart.js
var chartContext = ${toString(chartContext)}; 替换为
var g_chartContext = ${toString(chartContext)};
  
// 使用时,把chartContext 全都替换为g_chartContext 就可以了
  

option.tooltip.formatter = (params) => {
  return `<div style="width: ${g_chartContext.width*690}px; font-size: ${g_chartContext.width*26}px;"></div>` // 此处deviceW并不生效,获取不到外部定义的变量
}

   4.终极版:

import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

export default class Assets {

    static fromModule(moduleId) {
return resolveAssetSource(moduleId);
}
}
import Assets from 'emrn-common/utils/assets'

<WebView
ref="chart"
scrollEnabled={false}
injectedJavaScript={renderChart(this.props)}
originWhitelist={['*']}
style={{
height: this.props.height || 400,
backgroundColor: this.props.backgroundColor || 'transparent'
}}
scalesPageToFit={Platform.OS === 'android'}
// source={{ html: tpl, baseUrl: '' }}
// source={source}
source={{uri: Assets.fromModule(source).uri}}
// onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
/>

react-native-echarts在打包时出现的坑的更多相关文章

  1. 【React Native开发】React Native进行签名打包成Apk

    转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50525976 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...

  2. [RN] React Native 好用的时间线 组件

    React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...

  3. React Native (二) ios打包到真机

    每当在模拟器上完成了开发,都想到真机上试试,正好前段时候淘了一个imac. 这里就以打包rndemo到iphone为例,讲一下react ntive ios打包到真机的流程. 一.前置 1.有个iph ...

  4. React Native的APP打包教程

    1.改软件的名称 2.改软件的图标 3.给做好的项目打成APP包 改软件的名称 找到项目的改名的位置 然后用记事本打开strings.xml,然后改自己想要的名字 改软件的图标 找到如下5个文件,然后 ...

  5. React Native搭建开发环境 之 --走过的坑

    React Native是使用JavaScript和React编写原生移动应用 我的开发平台是基于windows系统,所以只支持android,要是想开发ios系统,那就只能考虑使用沙盒环境 接下来就 ...

  6. 谈谈React Native环境安装中我遇到的坑

    谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-nati ...

  7. React Native安卓项目打包发布APK步骤

    1.产生签名的key 该过程会用到keytool,开发过安卓的都应该接触过该东西.详细请见密钥和证书管理工具.在项目的主目录(不是android文件夹)中执行: --生成签名key,注意记下你的密钥和 ...

  8. React Native之APK文件签名及打包

    生成apk签名文件 我们使用android studio的方式进行签名 AS工具栏找到并点击 build->gennrate signed apk 两种情况: 1.这里如果已经有签名文件了则直接 ...

  9. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

随机推荐

  1. QUIC协议原理分析(转)

    之前深入了解了一下HTTP1.1.2.0.SPDY等协议,发现HTTP层怎么优化,始终要面对TCP本身的问题.于是了解到了QUIC,这里分享一篇之前找到的有意义的文章. 原创地址:https://mp ...

  2. 滤波器——BoxBlur均值滤波及其快速实现

    个人博客地址:滤波器--BoxBlur均值滤波及其快速实现 动机:卷积核.滤波器.卷积.相关 在数字图像处理的语境里,图像一般是二维或三维的矩阵,卷积核(kernel)和滤波器(filter)通常指代 ...

  3. sublime text3插件增强侧边栏的功能文件的复制粘贴

    快捷键ctrl + shift +p 输入  install package 回车,调出插件搜索器, 在搜索栏中输入 SideBarEnhancements 回车安装插件. 在侧边栏中的各种操作功能增 ...

  4. 点击菜单选项,右侧主体区新增子界面(Tab)的实现

    今天是2019年小年后一天,还有三天回家过年. 今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面.一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区.有一种效 ...

  5. 制作联动时,数据绑定combox控件会触发SelectedIndexChanged事件

    看过很多个网站的解决办法,基本雷同,还不能解决,真怀疑他们是互相直接炒的,没事通过验证. 在做省市区的三级联动时候出现这个问题,最后通过先设置值对象和显示对象,最后才绑定数据,这样一个逻辑操作,什么问 ...

  6. Java 处理 multipart/mixed 请求

    一.multipart/mixed 请求   multipart/mixed 和 multipart/form-date 都是多文件上传的格式.区别在于,multipart/form-data 是一种 ...

  7. Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  8. vue 日期时间过滤器

    来自:https://blog.csdn.net/m0_37068028/article/details/72898154 侵删 来自:https://segmentfault.com/a/11900 ...

  9. springboot集成elasticsearch

    在基础阶段学习ES一般是首先是 安装ES后借助 Kibana 来进行CURD 了解ES的使用: 在进阶阶段可以需要学习ES的底层原理,如何通过Version来实现乐观锁保证ES不出问题等核心原理: 第 ...

  10. JAVA 四舍五入Math.round方法

    今天由于测试场景,利息的计算中涉及小数点的保留.保留的规则是:两位小数+四舍五入方式 使用的语言是JAVA, 看了许多网上的方法.因为最后保留的小数还会进行计算.所以我考虑最好不要保留的结果是Stri ...