问题描述
在使用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
}