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
來源：简书