React Native WebView 中的 SVG 加载问题 (iOS)

Question

使用的工具

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

之前我使用的是 react-native 0.59.8 我使用的是 react-native 的 WebView，在这个版本中 WebView 工作正常，SVG 也可以完美加载，但是将react native升级到0.60.3后，我还必须从react-native-webview中获取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 }}/>

通话中：

this.webview.postMessage("data");

在 HTML 中捕获：

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

正在 HTML 中加载 SVG :-

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')
        }
      );
    }

在 android 中相同的代码工作正常，但在 iOS 中却不行来自react-native的WebView，我不知道我错过了什么，可能是一些属性。请帮助。

更新：我收到错误消息：{"isTrusted":true}，我认为这是与跨源相关的问题，有没有办法在 iOS WKWebView 中禁用它？

Answer 1

iOS WKWebView 实际上在 WKWebViewConfiguration 中包含了这个配置键，所以这是一个简单的修复。我添加了行：

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

在文件 RNCWebView.m 的第 200 行中，让它工作（在桥中添加到 react-native 共享道具之后。）

来源：https://github.com/react-native-community/react-native-webview/issues/1290

React Native WebView 中的 SVG 加载问题 (iOS)

SVG loading issue in react native WebView (iOS)

webview

ios

d3.js

react-native

react-native-webview