Merge 41b7a88c6a into 3767deeae3

.gitignore

@@ -1,2 +1,4 @@
 /node_modules
 *.sh
+# webstorm
+.idea

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();
-    }
-  }
 
-  setNewOption(option) {
+// 解决数据改变时页面闪烁的问题
-    this.refs.chart.postMessage(JSON.stringify(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)}
+            injectedJavaScript = {renderChart(this.props,true)}
             style={{
               height: this.props.height || 400,
-            backgroundColor: this.props.backgroundColor || 'transparent'
             }}
-          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>
+      );
+    }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,24 @@
+// 修改后
 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';
+  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)});
+  `
+  }else{
+    return `
+    document.getElementById('main').style.height = "${height}";
+    document.getElementById('main').style.width = "${width}";
+    myChart.clear();
     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);
-    });
   `
   }
+}

src/util/toString.js

@@ -7,7 +7,8 @@ export default function toString(obj) {
   });
 
   do {
-        result = result.replace('\"~--demo--~', '').replace('~--demo--~\"', '').replace(/\\n/g, '').replace(/\\\"/g,"\"");//最后一个replace将release模式中莫名生成的\"转换成"
+    result = result.replace('\"~--demo--~', '').replace('~--demo--~\"', '');
   } while (result.indexOf('~--demo--~') >= 0);
+  result = result.replace(/\\n/g, '').replace(/\\\"/g,"\"");//最后一个replace将release模式中莫名生成的\"转换成"
   return result;
 }