修复在oppo r7下会出现的闪烁问题（去掉webview的background），以及去掉重复echarts.init可能导致的问题。

src/components/Echarts/index.js

@@ -1,42 +1,69 @@
+// 修改后
 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 {
+// 预防过渡渲染
 
-  constructor(props) {
+  shouldComponentUpdate(nextProps, nextState) {
-    super(props);
+    const thisProps = this.props || {}
-    this.setNewOption = this.setNewOption.bind(this);
+    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.reload();
+
+// 解决数据改变时页面闪烁的问题
+      this.refs.chart.injectJavaScript(renderChart(nextProps,false))
     }
   }
 
-  setNewOption(option) {
-    this.refs.chart.postMessage(JSON.stringify(option));
-  }
-
   render() {
-    return (
+    if (Platform.OS == 'android'){
-      <View style={{flex: 1, height: this.props.height || 400,}}>
+      return (
-        <WebView
+        <View style={{flex: 1, height: this.props.height || 400,}}>
-          ref="chart"
+          <WebView
-          scrollEnabled = {false}
+            ref="chart"
-          injectedJavaScript = {renderChart(this.props)}
+            scrollEnabled = {false}
-          style={{
+            injectedJavaScript = {renderChart(this.props,true)}
-            height: this.props.height || 400,
+            style={{
-            backgroundColor: this.props.backgroundColor || 'transparent'
+              height: this.props.height || 400,
-          }}
+            }}
-          scalesPageToFit={Platform.OS !== 'ios'}
+            //source={require('./tpl.html')}
-          source={require('./tpl.html')}
+            source={{uri: 'file:///android_asset/tpl.html'}}
-          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
+          />
-        />
+        </View>
-      </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= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}
+          />
+        </View>
+      );
+    }
+
   }
 }

src/components/Echarts/renderChart.js

@@ -1,30 +1,23 @@
+// 修改后
 import echarts from './echarts.min';
 import toString from '../../util/toString';
-
+var myChart = null;
-export default function renderChart(props) {
+export default function renderChart(props,isFirst) {
+  // const height = props.height || 400;
   const height = `${props.height || 400}px`;
   const width = props.width ? `${props.width}px` : 'auto';
-  return `
+  if (isFirst){
+    return `
     document.getElementById('main').style.height = "${height}";
     document.getElementById('main').style.width = "${width}";
-    var myChart = echarts.init(document.getElementById('main'));
+    myChart = echarts.init(document.getElementById('main'));
     myChart.setOption(${toString(props.option)});
-    window.document.addEventListener('message', function(e) {
-      var option = JSON.parse(e.data);
-      myChart.setOption(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);
-    });
   `
+  }else{
+    return `
+    document.getElementById('main').style.height = "${height}";
+    document.getElementById('main').style.width = "${width}";
+    myChart.setOption(${toString(props.option)});
+  `
+  }
 }