react-native-echarts 解决数据刷新闪烁,不能动态连续绘制问题(转载)
最终能实现效果:动态绘制K线图,安卓,iOS正常显示
替换node_modules/native-echarts/src/components/Echarts/
中的index.js
和renderChart.js
index.js替换代码
import React, { Component } from 'react';
import { WebView, View, StyleSheet,Platform } from 'react-native';
import renderChart from './renderChart';
import renderChartNoFirst from './renderChart'
import echarts from './echarts.min'; export default class App extends Component {
// 预防过渡渲染 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,false))
}
} render() {
if (Platform.OS == 'android'){
return (
<View style={{flex: 1, height: this.props.height || 400,}}>
<WebView
ref="chart"
scrollEnabled = {false}
injectedJavaScript = {renderChart(this.props,true)}
style={{
height: this.props.height || 400,
}}
//source={require('./tpl.html')}
source={{uri: 'file:///android_asset/tpl.html'}}
/>
</View>
);
}else{
return (
<View style={{flex: 1, height: this.props.height || 400,}}>
<WebView
ref="chart"
scrollEnabled = {false}
scalesPageToFit={false}
injectedJavaScript = {renderChart(this.props,true)}
style={{
height: this.props.height || 400,
}}
source={require('./tpl.html')}
/>
</View>
);
} }
}
renderChart.js替换代码
import echarts from './echarts.min';
import toString from '../../util/toString';
var myChart = null;
export default function renderChart(props,isFirst) {
const height = props.height || 400;
if (isFirst){
return `
document.getElementById('main').style.height = "${height}px";
myChart = echarts.init(document.getElementById('main'));
myChart.setOption(${toString(props.option)});
`
}else{
return `
document.getElementById('main').style.height = "${height}px"; myChart.setOption(${toString(props.option)});
`
}
}
安卓打包echart不显示修复
1.将上述代码替换,注意备注部分
//解决安卓打包不显示问题
source={{uri: 'file:///android_asset/tpl.html'}}
2.将node_modules/native-echarts/src/components/Echarts/tpl.html
拷贝一份到/android/app/src/main/assets/
目录下
3.运行js打包命令
4.删除/android/app/src/main/res/drawable-mdpi/node_modules_nativeecharts_src_components_echarts_tpl.html
5.安卓打包APK
作者:LPrison
链接:https://www.jianshu.com/p/6fa9482695bf
來源:简书
react-native-echarts 解决数据刷新闪烁,不能动态连续绘制问题(转载)的更多相关文章
- React Native 获取网络数据
getMoviesFromApiAsync() { return fetch('http://facebook.github.io/react-native/movies.json') .then(( ...
- react native 完美解决启动白屏
先讲下我的RN版本0.58.5 首先安装react-native-splash-screen(目前使用的版本是3.2.0) 项目地址https://github.com/crazycodeboy/re ...
- React Native 适配Android物理返回键,实现连续两次点击退出
一直使用iPhone作为测试机开发,提交给测试同事Android版本后发现很多适配问题,其中一个非常明显的是,弹出一个modal后,点击Android的返回键,modal不会消失,直接navigati ...
- React Native 网络层分析
文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...
- React Native:使用 JavaScript 构建原生应用
[转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...
- 深入浅出 React Native:使用 JavaScript 构建原生应用
深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...
- React Native:使用 JavaScript 构建原生应用 详细剖析
数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了! 基于 Pho ...
- React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
- 关于React Native 火热的话题,从入门到原理
本文授权转载,作者:bestswifter(简书) React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...
随机推荐
- IQC来料检验报表
***************************************************************** * System : XXXXXXXXX * Module : QM ...
- 常用加密算法简单整理以及spring securiy使用bcrypt加密
一.哈希加密 1.md5加密 Message Digest Algorithm MD5(中文名为消息摘要算法第五版) https://baike.baidu.com/item/MD5/212708?f ...
- 通过cassandra-cli客户端了解cassandra的内部数据结构
和cassandra数据库交互的方式有两种,一种是通过类似于cassandra-cli命令的thrift api,或者通过cassandra提供的cql(cassandra query lanugag ...
- 【Java】XML
一.XML XML(Extensible Markup Language),可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言. 格式: <?xml version="1. ...
- [luogu P3382] 三分法
[luogu P3382] 三分法 题目描述 如题,给出一个N次函数,保证在范围[l,r]内存在一点x,使得[l,x]上单调增,[x,r]上单调减.试求出x的值. 输入输出格式 输入格式: 第一行一次 ...
- Linux安装/卸载软件教程
一.源码安装 ./configure #环境检查.生成makefile make #编译 make install #安装 这三条命令是最经典的Linux软件安装,适用于所有发行版 二.软件包管理工具 ...
- javascript中的require、import和export模块文件
CommonJS 方式 文件输出如math.js: math.add = function(a,b){ return a+b; }exports.math = math; 文件引入: math = r ...
- Vscode extensions开发
Vscode extensions开发 1◆ generatorcode install npm install -g yo generator-code 2◆ 步骤 yo code ...
- 有多个.h引用时,不能有using namespace std
#include<iostream.h> #include<math.h> //using namespace std; 有多个.h引用时,不能有这个,否则无法运行. void ...
- Java获取后台数据,动态生成多行多列复选框
本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...