WebView debug

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"
+      }
+    }
+  }
+}

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"
   }
 }

src/components/Echarts/index.js

@@ -1,18 +1,17 @@
-import React, { Component } from 'react';
+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';
+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}
+          scrollEnabled={false}
-          injectedJavaScript = {renderChart(this.props)}
+          injectedJavaScript={renderChart(this.props)}
           style={{
             height: this.props.height || 400,
-            backgroundColor: this.props.backgroundColor || 'transparent'
+            backgroundColor: this.props.backgroundColor || "transparent"
           }}
-          scalesPageToFit={Platform.OS !== 'ios'}
+          scalesPageToFit={Platform.OS !== "ios"}
-          originWhitelist={['*']}
+          originWhitelist={["*"]}
-          source={require('./tpl.html')}
+          source={require("./tpl.html")}
-          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
+          onMessage={event =>
+            this.props.onPress
+              ? this.props.onPress(JSON.parse(event.nativeEvent.data))
+              : null
+          }
         />
       </View>
     );