ios 兼容问题

src/components/Echarts/index.js

@@ -1,39 +1,43 @@
-import React, {Component} from 'react';
-import {WebView, View, StyleSheet, Platform} from 'react-native';
-import renderChart from './renderChart';
+import React, { Component } from "react";
+import { WebView, View } from "react-native";
+import renderChart from "./renderChart";
 
 export default class App extends Component {
-
-    constructor(props) {
-        super(props);
-        this.setNewOption = this.setNewOption.bind(this);
+    // 预防过渡渲染
+    shouldComponentUpdate(nextProps = {}, nextState) {
+        const thisProps = this.props || {};
+        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])) {
+                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;
         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)}
+                    scalesPageToFit={false}
+                    injectedJavaScript={renderChart(this.props, true)}
                     style={{
                         height: this.props.height || 400,
-                        backgroundColor: this.props.backgroundColor || 'transparent'
                     }}
-                    scalesPageToFit={Platform.OS !== 'ios'}
-                    source={require('./tpl.html')}
-                    onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
+                    onMessage={messageFn}
+                    source={require("./tpl.html")}
                 />
             </View>
         );

src/components/Echarts/renderChart.js

@@ -1,29 +1,21 @@
-import toString from '../../util/toString';
-
-export default function renderChart(props) {
+import toString from "../../util/toString";
+export default function renderChart(props, isFirst) {
     const height = `${props.height || 400}px`;
-  const width = props.width ? `${props.width}px` : 'auto';
+    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)});
-    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);
-    });
-  `
+    return `
+    document.getElementById('main').style.height = "${height}";
+    document.getElementById('main').style.width = "${width}";
+    myChart.clear();
+    myChart.resize();
+    myChart.setOption(${toString(props.option)});
+  `;
 }