React Native 0.64.0 WebView无法打开tel链接及唤起邮件编辑器问题

环境版本 #

"react": "17.0.1",
"react-native": "0.64.0"

问题详情 #

将API返回的HTML内容在WebView中展示，HTML代码如下：

<br>
<div class="address"><span></span></div>
<div class="address"><span></span></div>
<div class="phone"><a href="tel:%20+91%2079%204898%208801"><i class="fa fa-phone" title="Phone"></i> <span style="text-decoration: underline;"> +91 79 4898 8801</span></a></div>
<div class="mail"><a href="mailto:%20info@shop.com">info@shop.com</a></div>
<br><br>

点击电话和邮件链接时，无法唤起系统拨号器或邮件编辑器，同时弹出警告：

Can't open url: tel:%20+91%2079%204898%208801

解决办法 #

1. 清理链接中的多余空格 #

问题核心是tel:和mailto:协议后跟着的%20（URL编码的空格），这类协议不允许开头有多余空格。在渲染前处理HTML内容，替换掉这些无效空格：

// 处理API返回的HTML
const processedHtml = apiHtml
  .replace(/href="tel:%20/g, 'href="tel:')
  .replace(/href="mailto:%20/g, 'href="mailto:');

2. 手动拦截WebView导航请求（可选加固） #

通过WebView的onShouldStartLoadWithRequest方法拦截导航，用React Native的Linking模块直接处理tel/mailto链接：

import { Linking } from 'react-native';
import WebView from 'react-native-webview';

const handleWebNavigation = (request) => {
  const { url } = request;
  if (url.startsWith('tel:')) {
    Linking.openURL(url);
    return false; // 阻止WebView加载该链接
  }
  if (url.startsWith('mailto:')) {
    Linking.openURL(url);
    return false;
  }
  return true; // 正常加载其他网页链接
};

// 使用处理后的HTML和拦截逻辑
<WebView
  source={{ html: processedHtml }}
  onShouldStartLoadWithRequest={handleWebNavigation}
/>

3. 确认WebView基础配置 #

确保WebView开启了JavaScript支持（默认开启，若手动关闭会影响交互）：

<WebView
  source={{ html: processedHtml }}
  javaScriptEnabled={true}
  onShouldStartLoadWithRequest={handleWebNavigation}
/>

内容的提问来源于stack exchange，提问作者Bhaveen Parghi