最終能實(shí)現(xiàn)效果：動態(tài)繪制K線圖，安卓，iOS正常顯示

dynamic.gif

替換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 {
// 預(yù)防過渡渲染

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) {
  
// 解決數(shù)據(jù)改變時頁面閃爍的問題
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不顯示修復(fù)

1.將上述代碼替換，注意備注部分

//解決安卓打包不顯示問題        
source={{uri: 'file:///android_asset/tpl.html'}} 

2.將node_modules/native-echarts/src/components/Echarts/tpl.html拷貝一份到/android/app/src/main/assets/目錄下

3.運(yùn)行js打包命令
4.刪除/android/app/src/main/res/drawable-mdpi/node_modules_nativeecharts_src_components_echarts_tpl.html
5.安卓打包APK