SVG loading issue in react native WebView (iOS)

问题

Tools used

D3 js: v4.11.0
react-native: v0.60.3
react-native-webview: v9.3.0

Previously I was using react-native 0.59.8 and I was using WebView from react-native, in this version WebView was working fine, SVG was also loading perfectly, but after upgrading react native to 0.60.3, I also have to take WebView from react-native-webview,

React Native WebView :-

<WebView
scrollEnabled = {true}
originWhitelist={["*"]}
javaScriptEnabled={true}
source={{ uri: isAndroid ? "file:///android_asset/widget/index.html" : "./widget/index.html" }}
// useWebKit={false}
allowUniversalAccessFromFileURLs={true}
allowFileAccess={true}
scalesPageToFit={true}
onMessage={this.getSelectedSeat}
ref={component => (this.webview = component)}
style={{ width: deviceWidth, height: deviceHeight }}/>

Calling:

this.webview.postMessage("data");

Capturing in HTML:

this.window.addEventListener("message", data => {
}

Loading SVG in HTML :-

function loadSVG(svgURL) {
      d3.xml(
        svgURL,
        function (xml) {
          if (xml != null) {
            var importedFile = document.importNode(xml.documentElement, true);
            d3.select("#layout")
              .node()
              .append(importedFile);
          }
        },
        err => {
          alert('error')
        }
      );
    }

In android same code is working fine, but not in iOS, every time xml is null, but it was fine in the older version of WebView where I was taking WebView from react-native, I don't know what I'm missing, may be some property. Please Help.

Update: I'm getting error message: {"isTrusted":true}, I think this is Cross-Origin related issue, is there any way to disable this in iOS WKWebView?

来源：https://stackoverflow.com/questions/61523598/svg-loading-issue-in-react-native-webview-ios

标签

ios

react-native

d3.js

webview

react-native-webview