react native WebView（iOS）中的SVG加载问题答案

【问题标题】：SVG loading issue in react native WebView (iOS)react native WebView（iOS）中的SVG加载问题
【发布时间】：2020-08-14 19:52:38
【问题描述】：

使用的工具

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 中却不行，每次 xml 为 null，但在旧版本的 WebView 中很好，我从 react-native 获取 WebView，我不知道我是什么'米失踪，可能是一些财产。请帮忙。

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

【问题讨论】：

您能分享一下您的情况下的 svgURL 是什么吗？本地网址？外部？
它是一个外部网址，类似于：http:///assets/ta/SM/LAYOUT/SVG/FT%201st%20Floor.svg

标签： ios react-native d3.js webview react-native-webview

【解决方案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

【讨论】：