反应原生 webview 上的 ERR_UNKNOWN_URL_SCHEME答案

【问题标题】：ERR_UNKNOWN_URL_SCHEME on react native webview反应原生 webview 上的 ERR_UNKNOWN_URL_SCHEME
【发布时间】：2019-11-10 00:17:10
【问题描述】：

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

当我点击带有

的链接时

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

我收到错误 err_unknown_url_scheme。

谢谢

【问题讨论】：

这是一个有效的标签吗？
编辑了源代码。

标签： android ios react-native mobile webview

【解决方案1】：

可以通过编辑webview参数来解决问题。

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

【讨论】：

哪个 webview 参数实际上解决了这个问题？
原产地白名单
我有originWhitelist={['*']} 但显然不包括电话：和短信：。像上面的代码一样显式添加它们解决了这个问题。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

WebViews 中的mailto 链接也有类似的问题。我发现这是在 react-native-webview 上打开的 issue。将originWhitelist 从{[*]} 修改为答案中建议的显式列表对我没有帮助。但是我可以通过应用这个fix 来解决这个问题。它为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;
}

【讨论】：

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

【讨论】：