SVG 在反应原生 WebView (iOS) 中加载问题

Question

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?

Answer 1

The iOS WKWebView actually includes this config key in the WKWebViewConfiguration, so it's a straightforward fix. I added the line:

[wkWebViewConfig setValue:@TRUE forKey:@"allowUniversalAccessFromFileURLs"];

In the file RNCWebView.m, line 200, to get it to work (after adding to the react-native shared props in the bridge.)

source: https://github.com/react-native-community/react-native-webview/issues/1290