react native WebView(iOS)中的SVG加载问题
使用的工具react native WebView(iOS)中的SVG加载问题,ios,react-native,d3.js,webview,react-native-webview,Ios,React Native,D3.js,Webview,React Native Webview,使用的工具 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 反应本机网络视图:- <WebView scrollEna
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
反应本机网络视图:-
<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 }}/>
以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中禁用此功能?iOS WKWebView实际上在WKWebViewConfiguration中包含此配置键,因此这是一个简单的修复方法。我加了一句话:
[wkWebViewConfig setValue:@TRUE forKey:@"allowUniversalAccessFromFileURLs"];
在文件RNCWebView.m的第200行,以使其工作(在桥中添加react本机共享道具之后)
来源:您能分享一下您的案例中的svgURL是什么吗?本地网址?外部?它是一个外部url,类似这样:http:///assets/ta/SM/LAYOUT/SVG/FT%201st%20Floor.svg
[wkWebViewConfig setValue:@TRUE forKey:@"allowUniversalAccessFromFileURLs"];