如何在React Native中通过Linking.canOpenUrl打开Android端WhatsApp

1. 确认Android端配置（你已完成的部分） #

你添加的<queries>配置是正确的，务必将其放在AndroidManifest.xml的<manifest>标签内部（而非<application>标签内），完整配置片段如下：

<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="whatsapp" />
  </intent>
</queries>

这是Android 11及以上版本的必需配置，用于声明App需要查询WhatsApp的存在权限。

2. 核心功能实现（基于Linking API） #

在React Native组件中，通过以下步骤完成点击打开WhatsApp的逻辑：

步骤1：导入所需模块 #

import { Linking, TouchableOpacity, Text } from 'react-native';

步骤2：编写打开WhatsApp的处理函数 #

const openWhatsApp = async () => {
  // 替换为目标号码，格式为「+国家代码+手机号」，无空格/特殊字符
  const targetPhone = '+8613800138000';
  const whatsappUrl = `whatsapp://send?phone=${targetPhone}`;

  try {
    // 先校验设备是否能打开该URL
    const isAvailable = await Linking.canOpenUrl(whatsappUrl);
    if (isAvailable) {
      await Linking.openURL(whatsappUrl);
    } else {
      alert('设备未安装WhatsApp，请先安装后重试');
    }
  } catch (err) {
    alert('打开WhatsApp失败，请稍后再试');
    console.error('WhatsApp打开错误:', err);
  }
};

步骤3：添加触发按钮 #

在组件的JSX中加入可点击的按钮：

<TouchableOpacity 
  onPress={openWhatsApp} 
  style={{ 
    padding: 12, 
    backgroundColor: '#25D366', 
    borderRadius: 6,
    alignSelf: 'center'
  }}
>
  <Text style={{ color: '#fff', fontSize: 16, fontWeight: '500' }}>
    打开WhatsApp聊天
  </Text>
</TouchableOpacity>

3. iOS端兼容配置（若需支持iOS） #

iOS无需Android式的权限声明，但如果项目的info.plist中使用了LSApplicationQueriesSchemes，需将whatsapp加入列表：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>whatsapp</string>
</array>

该配置允许App查询iOS设备上是否安装了WhatsApp。

注意事项 #

• 号码格式必须严格：必须包含国际区号，且不能有空格、括号或连字符，例如+8613800138000是正确格式
• 若需打开群组，可使用whatsapp://send?text=消息内容&abid=群组ID格式，群组ID需提前获取
• 测试时确保设备已安装WhatsApp，否则会触发错误提示

内容的提问来源于stack exchange，提问作者Solomon Owusu-Ansah