[opt] Remove WebView after destruction.

supervons · Aug 23, 2022 · 657bc45 · 657bc45
1 parent 38e5b51
commit 657bc45
Showing 1 changed file with 29 additions and 17 deletions.
diff --git a/src/components/Echarts/index.js b/src/components/Echarts/index.js
@@ -17,6 +17,7 @@ function Echarts(props, ref) {
   const echartRef = useRef();
   const [extensionScript, setExtensionScript] = useState("");
   const [instanceFlag] = useState(false);
+  const [showContainer, setShowContainer] = useState(true);
   const [instanceResult, setInstanceResult] = useState({});
   const latestCount = useRef(instanceFlag);
   const latestResult = useRef(instanceResult);
@@ -64,6 +65,15 @@ function Echarts(props, ref) {
     echartRef.current.postMessage(JSON.stringify(props.option));
   }, [props.option]);
 
+  /**
+   * Remove WebView after destruction.
+   */
+  useEffect(() => {
+    return () => {
+      setShowContainer(false);
+    };
+  }, []);
+
   /**
    * Capture the echarts event.
    * @param event echarts event in webview.
@@ -112,23 +122,25 @@ function Echarts(props, ref) {
 
   return (
     <View style={{ flex: 1, height: props.height || 400 }}>
-      <WebView
-        androidHardwareAccelerationDisabled={true}
-        textZoom={100}
-        scrollEnabled={true}
-        style={{
-          ...props.webViewStyle,
-          height: props.height || 400,
-          backgroundColor: props.backgroundColor || "transparent",
-        }}
-        {...props.webViewSettings}
-        ref={echartRef}
-        injectedJavaScript={renderChart(props)}
-        scalesPageToFit={Platform.OS !== "ios"}
-        originWhitelist={["*"]}
-        source={{ html: `${HtmlWeb} ${extensionScript}` }}
-        onMessage={onMessage}
-      />
+      {showContainer && (
+        <WebView
+          onLoadEnd={(syntheticEvent) => {}}
+          androidHardwareAccelerationDisabled={true}
+          textZoom={100}
+          scrollEnabled={true}
+          style={{
+            height: props.height || 400,
+            backgroundColor: props.backgroundColor || "transparent",
+          }}
+          {...props.webViewSettings}
+          ref={echartRef}
+          injectedJavaScript={renderChart(props)}
+          scalesPageToFit={Platform.OS !== "ios"}
+          originWhitelist={["*"]}
+          source={{ html: `${HtmlWeb} ${extensionScript}` }}
+          onMessage={onMessage}
+        />
+      )}
     </View>
   );
 }