React Native WebView(iOS)中的SVG加载问题 [英] SVG loading issue in react native WebView (iOS)

问题描述

使用的工具

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，

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:-

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:-

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

在android中，相同的代码工作正常，但在iOS中，每次xml为null时都无法正常工作，但是在较旧版本的WebView(我从react-native获取WebView的版本)中就可以了，我不知道我在做什么我失踪了，可能是一些财产.请帮忙.

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.

更新: 我收到错误消息:{"isTrusted":true}，我认为这是与跨域相关的问题，有什么方法可以在iOS WKWebView中禁用它吗?

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?

推荐答案

iOS WKWebView实际上在WKWebViewConfiguration中包含此配置键，因此是一个简单的解决方法.我添加了一行:

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"];

在RNCWebView.m文件的第200行中，使其工作(在桥中添加到react-native共享props之后).

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

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

这篇关于React Native WebView(iOS)中的SVG加载问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！