From 4a0c389d472d3f5dd62319e9e759df02c12b2bdc Mon Sep 17 00:00:00 2001
From: "guohun.liang" <guohun.liang@getech.cn>
Date: Thu, 22 Oct 2020 17:42:19 +0800
Subject: [PATCH] =?UTF-8?q?react-native=200.60=E4=BB=A5=E5=90=8E=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Echarts/index.js | 28 +++++++++++++++++++---------
 src/components/Echarts/tpl.html |  2 +-
 src/index.js                    |  1 -
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/Echarts/index.js b/src/components/Echarts/index.js
index fe86c8c..fdcb9af 100644
--- a/src/components/Echarts/index.js
+++ b/src/components/Echarts/index.js
@@ -1,31 +1,40 @@
 import React, { Component } from 'react';
-import { WebView, View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
 import renderChart from './renderChart';
+import WebView from 'react-native-webview';
 import echarts from './echarts.min';
-
+// 版本变更https://zhuanlan.zhihu.com/p/89494013
 export default class App extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {chart:null};
+    // refs 弃用了 https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
+    this.chart = null;
+    this.setChart = element => {
+      this.setState({chart:element})
+    };
     this.setNewOption = this.setNewOption.bind(this);
   }
   
-
-  componentWillReceiveProps(nextProps) {
-    if(nextProps.option !== this.props.option) {
-      this.refs.chart.reload();
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if(nextProps.option !== prevState.option) {
+      prevState.chart && prevState.chart.reload();
     }
+
+    return null;
   }
 
+
   setNewOption(option) {
-    this.refs.chart.postMessage(JSON.stringify(option));
+    this.state.chart && this.state.chart.postMessage(JSON.stringify(option));
   }
 
   render() {
     return (
       <View style={{flex: 1, height: this.props.height || 400,}}>
         <WebView
-          ref="chart"
+          ref = {this.setChart} 
           scrollEnabled = {false}
           injectedJavaScript = {renderChart(this.props)}
           style={{
@@ -34,7 +43,8 @@ export default class App extends Component {
           }}
           scalesPageToFit={Platform.OS !== 'ios'}
           originWhitelist={['*']}
-          source={require('./tpl.html')}
+          // source={require('./tpl.html')}
+          source= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}
           onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
         />
       </View>
diff --git a/src/components/Echarts/tpl.html b/src/components/Echarts/tpl.html
index ca20a31..5bd5e2f 100644
--- a/src/components/Echarts/tpl.html
+++ b/src/components/Echarts/tpl.html
@@ -11,7 +11,7 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        // overflow: hidden;
+        /* overflow: hidden; */
 
       }
       #main {
diff --git a/src/index.js b/src/index.js
index bc6a869..74883f9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { WebView, View } from 'react-native';
 import { Container, Echarts } from './components'
 
 export default class App extends Component {