ERR_UNKNOWN_URL_SCHEME on react native webview

Question

我正在开发一个带有react-native-webview的应用程序。

当我点击一个链接时

<a href="sms:888888&body=Test Message">Click here</a>

我收到错误err_unknown_url_scheme。

谢谢

Answer 1

我收到有关"mailto：和tel：链接在Webview中不起作用"的错误，对于我的情况，解决方法是在Webview中添加此属性：

<WebView
// other props here
originWhitelist={['http://*', 'https://*', 'intent://*']} 
/>

Answer 2

能够通过编辑 Web 视图参数来解决问题。

<WebView
{...this.props}
bounces={false}
originWhitelist={["https://*", "http://*", "file://*", "sms://*"]}
allowFileAccess={true}
domStorageEnabled={true}
javaScriptEnabled={true}
geolocationEnabled={true}
saveFormDataDisabled={true}
allowFileAccessFromFileURLS={true}
allowUniversalAccessFromFileURLs={true}
/>

Answer 3

我在WebView中mailto链接时遇到了类似的问题。我发现这是反应原生网络视图上的一个未解决的问题。按照答案中的建议将originWhitelist从{[*]}修改为显式列表对我没有帮助。但是我可以通过应用此修复程序来解决问题。 它为onShouldStartLoadWithRequest属性提供自定义实现。我用了

function onShouldStartLoadWithRequest(request){
if (!request || !request.url) {
return true;
}
// list of schemas we will allow the webview
// to open natively
if(request.url.startsWith("tel:") ||
request.url.startsWith("mailto:") ||
request.url.startsWith("maps:") ||
request.url.startsWith("geo:") ||
request.url.startsWith("sms:")
){
Linking.openURL(request.url).catch(er => {
console.log('Failed to open Link:', er.message);
});
return false;
}
// let everything else to the webview
return true;
}

Answer 4

由于未知原因，即使使用覆盖onShouldStartLoadWithRequest方法，webview 也为我崩溃了。

react-native-webview的第11.0.0版具有一个新选项setSupportMultipleWindows，当设置为 true 时，打开在新选项卡/窗口(如<a target="_blank">)中打开的链接现在将提示在系统浏览器中打开，而不是重复使用当前的 WebView。

<WebView
// links that open in new tabs/windows will now prompt to open in the system browser
setSupportMultipleWindows={true}
// other props here
/>

触发电话的链接

<a target="_blank" rel="nofollow noreferrer noopener" href="tel:+91xxxxxxxxx">Call now</a>

见 https://github.com/react-native-webview/react-native-webview/issues/1084#issuecomment-735048835