开发平台:mac pro

node版本:v8.11.2

npm版本:6.4.1

react-native版本:0.57.8

native-echarts版本:^0.5.0
目标平台:android端收银机,android7.0+

最近在使用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的更多相关文章

  1. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  2. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  3. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  4. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  5. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  6. react native中一次错误排查 Error:Error: Duplicate resources

    最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...

  7. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  8. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  9. react native中如何往服务器上传网络图片

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...

随机推荐

  1. [Kali_Metasploit]db_connect创建连接时无法连接的解决方案

    问题1复现路径: postgresql selected, no connection 第一步: db_connect postgres:toor@127.0.0.1/msfbook 连接成功不需要进 ...

  2. Mysql主从方案的实现

    Mysql主从方案介绍 mysql主从方案主要作用: 读写分离,使数据库能支撑更大的并发.在报表中尤其重要.由于部分报表sql语句非常的慢,导致锁表,影响前台服务.如果前台使用master,报表使用s ...

  3. spring boot -Properties & configuration

    72. Properties & configuration72.1 Automatically expand properties at build timeRather than hard ...

  4. app后端设计(8)-- 数据库分表

    当项目上线后,随着用户的增长,有些数据表的规模会以几何级增长,当数据达到一定规模的时候(例如100万条),查询,读取性能就下降得很厉害,这时,我们就要考虑分表. 更新表数据时会导致索引更新,当单表数据 ...

  5. win7 telnet命令无法开启的解决方案(不是内部命令或外部命令)

    如果你想在win 7上直接使用 telnet命令,却不能开启那怎么办呢?记得在Wingdows XP上telnet都是已经安装好的,直接就可用,但是Win7是没有这个功能的,都需要后来自己安装的,下面 ...

  6. 18.app后端如何实现LBS

    移动互联网,除了一直在线这个特点外,还有一个重要特点,能定位到手机的位置.查找附近的人,附近的餐馆等服务,以及大量的o2o应用, 都需要使用LBS(Location Based Services).那 ...

  7. 区分IE8 、IE9 、IE10的专属css hack

    想让IE8及以下的浏览器实现同样的效果,且不希望使用css3pie或htc或条件注释等方法时,可能就会需要用到IE8和IE9的专属css hack了. .test{ /* 1. */ color:#0 ...

  8. Python eval 函数妙用

    eval 功能:将字符串str当成有效的表达式来求值并返回计算结果. 语法: eval(source, globals, locals) -> value 参数: source:一个Python ...

  9. Postman 使用详解

    转自: http://blog.csdn.net/flowerspring/article/details/52774399 Postman 使用详解 阅读 6754收藏 3022016-6-9 作者 ...

  10. 【NOIP2011】 聪明的质监员

    小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n个矿石,从 1 到n逐一编号,每个矿石都有自己的重量wi以及价值vi.检验矿产的流程是: 1. 给定 m个区间[Li,Ri]: 2. ...