React Native 带#的号码链接调用拨号应用仅显示#号如何解决

API 探路者

2026-10-7

React Native 带#号号码拨号截断问题解决方案

根因说明

#属于URL保留特殊字符，直接传入tel:协议链接时，会被React Native的Linking组件识别为URL锚点分隔符，导致#后的所有字符被截断，最终拨号界面仅展示#符号。

解决方法

对号码中的所有#字符提前做URL编码，替换为编码值%23后再拼接为拨号链接触发跳转即可。

完整代码示例

import { Linking, Alert } from 'react-native';

// 拨号触发方法
const triggerDial = (rawNumber) => {
  // 替换所有#为编码后的%23
  const encodedNumber = rawNumber.replaceAll('#', '%23');
  const dialLink = `tel:${encodedNumber}`;

  // 校验设备支持拨号后再触发跳转
  Linking.canOpenURL(dialLink)
    .then(isSupport => {
      if (!isSupport) {
        Alert.alert('提示', '当前设备不支持拨号功能');
        return;
      }
      return Linking.openURL(dialLink);
    })
    .catch(err => console.log('拨号调用失败：', err));
}

// 调用示例
triggerDial('#873766');