Merge 230b8aceca into 3767deeae3

.gitignore

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

src/components/Echarts/index.js

@@ -1,42 +1,74 @@
+// 修改后
 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() {
+    const messageFn = this.props.onMessage || null;
+    if (Platform.OS == 'android') {
       return (
-      <View style={{flex: 1, height: this.props.height || 400,}}>
+        <View style={{ flex: 1, height: this.props.height || 400 }}>
           <WebView
             ref="chart"
             scrollEnabled={false}
-          injectedJavaScript = {renderChart(this.props)}
+            javaScriptEnabled={true}
+            injectedJavaScript={renderChart(this.props, true)}
             style={{
-            height: this.props.height || 400,
+              height: this.props.height || 400
-            backgroundColor: this.props.backgroundColor || 'transparent'
             }}
-          scalesPageToFit={Platform.OS !== 'ios'}
+            onMessage={messageFn}
-          source={require('./tpl.html')}
+            //source={require('./tpl.html')}
-          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
+            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
+            }}
+            onMessage={messageFn}
+            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.setOption(${toString(props.option)});
-    window.document.addEventListener('message', function(e) {
+  `
-      var option = JSON.parse(e.data);
+  }else{
-      myChart.setOption(option);
+    return `
-    });
+    document.getElementById('main').style.height = "${height}";
-    myChart.on('click', function(params) {
+    document.getElementById('main').style.width = "${width}";
-      var seen = [];
+    myChart.clear();
-      var paramsString = JSON.stringify(params, function(key, val) {
+    myChart.resize();
-        if (val != null && typeof val == "object") {
+    myChart.setOption(${toString(props.option)});
-          if (seen.indexOf(val) >= 0) {
-            return;
-          }
-          seen.push(val);
-        }
-        return val;
-      });
-      window.postMessage(paramsString);
-    });
   `
   }
+}

src/util/toString.js

@@ -7,7 +7,9 @@ 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模式中莫名生成的\"转换成"
+  result = unescape(result.replace(/\\u/g, "%u"));
   return result;
 }