react-native-webview网页拨打电话

问题描述

在使用ReactNative开发过程中，使用了WebView来加载公司的市场宣传网页，并且在页面上设置了手机号<a>标签，但是在应用中点击网页上的这个链接后，报错“net::ERR_UNKNOWN_URL_SCHEME”

tel://11011112222

 

环境说明

react-native-webview版本号：9.3.0

解决方法

设置Webview的onNavigationStateChange函数，当其为“tel://”协议时，使用Linking跳转，并且返回false拦截webview的默认动作，参考资料见github（https://github.com/react-native-community/react-native-webview/issues/1084）

render(){
  return(
    <WebView
      {...this.props}
      onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
    />
  )
}


/** ... 其他代码内容*/

/**
  *
  * @param request
  * @return {boolean} true：webView会继续加载默认动作，false：终止此次webView的加载动作
  */
onShouldStartLoadWithRequest = (request) => {
  let url = request.url
  if (url.startsWith('tel:')) {
    Linking.canOpenURL(url).then((enable) => {
      Linking.openURL(url).then(value => {
        console.log('openUrl ', value)
      })
    })
    return false
  }
  return true
}