From b99abc45dafc95ad650f50fcd013d71769ed0c0f Mon Sep 17 00:00:00 2001
From: Pipe-shen <yys320carter@163.com>
Date: Thu, 28 Nov 2019 22:05:52 +0800
Subject: [PATCH] WebView debug

---
 package-lock.json               | 43 +++++++++++++++++++++++++++++++++
 package.json                    |  3 ++-
 src/components/Echarts/index.js | 33 +++++++++++++------------
 3 files changed, 63 insertions(+), 16 deletions(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..c9727fa
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,43 @@
+{
+  "name": "native-echarts",
+  "version": "0.5.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha1-owME6Z2qMuI7L9IPUbq9B8/8o0Q="
+    },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Finvariant%2Fdownload%2Finvariant-2.2.4.tgz",
+      "integrity": "sha1-YQ88ksk1nOHbYW5TgAjSP/NRWOY=",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz",
+      "integrity": "sha1-GSA/tZmR35jjoocFDUZHzerzJJk="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz",
+      "integrity": "sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8=",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "react-native-webview": {
+      "version": "7.5.2",
+      "resolved": "https://registry.npm.taobao.org/react-native-webview/download/react-native-webview-7.5.2.tgz?cache=0&sync_timestamp=1574761994463&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-native-webview%2Fdownload%2Freact-native-webview-7.5.2.tgz",
+      "integrity": "sha1-naMAbgNjb6qp0F86v/Rs1Av7gPk=",
+      "requires": {
+        "escape-string-regexp": "2.0.0",
+        "invariant": "2.2.4"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 2fb8ee5..5a66ef8 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   },
   "homepage": "https://github.com/somonus/react-native-echarts#readme",
   "dependencies": {
-    "echarts": "3.2.3"
+    "echarts": "3.2.3",
+    "react-native-webview": "^7.5.2"
   }
 }
diff --git a/src/components/Echarts/index.js b/src/components/Echarts/index.js
index fe86c8c..9d077b9 100644
--- a/src/components/Echarts/index.js
+++ b/src/components/Echarts/index.js
@@ -1,18 +1,17 @@
-import React, { Component } from 'react';
-import { WebView, View, StyleSheet, Platform } from 'react-native';
-import renderChart from './renderChart';
-import echarts from './echarts.min';
+import React, { Component } from "react";
+import { View, StyleSheet, Platform } from "react-native";
+import { WebView } from "react-native-webview";
+import renderChart from "./renderChart";
+import echarts from "./echarts.min";
 
 export default class App extends Component {
-
   constructor(props) {
     super(props);
     this.setNewOption = this.setNewOption.bind(this);
   }
-  
 
   componentWillReceiveProps(nextProps) {
-    if(nextProps.option !== this.props.option) {
+    if (nextProps.option !== this.props.option) {
       this.refs.chart.reload();
     }
   }
@@ -23,19 +22,23 @@ export default class App extends Component {
 
   render() {
     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)}
+          scrollEnabled={false}
+          injectedJavaScript={renderChart(this.props)}
           style={{
             height: this.props.height || 400,
-            backgroundColor: this.props.backgroundColor || 'transparent'
+            backgroundColor: this.props.backgroundColor || "transparent"
           }}
-          scalesPageToFit={Platform.OS !== 'ios'}
-          originWhitelist={['*']}
-          source={require('./tpl.html')}
-          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
+          scalesPageToFit={Platform.OS !== "ios"}
+          originWhitelist={["*"]}
+          source={require("./tpl.html")}
+          onMessage={event =>
+            this.props.onPress
+              ? this.props.onPress(JSON.parse(event.nativeEvent.data))
+              : null
+          }
         />
       </View>
     );