如何将React Native应用加入WhatsApp位置打开列表并获取经纬度

要让你的应用出现在WhatsApp打开位置的选项列表里，核心是配置应用支持处理地理位置相关的Intent（Android）或URL Scheme（iOS），位置权限和这个列表的显示无关，你之前添加的位置权限不影响这个功能。

Android 配置步骤 #

编辑android/app/src/main/AndroidManifest.xml，在你的主Activity（通常是MainActivity）标签内添加以下Intent Filter：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 接收WhatsApp触发的geo协议位置链接 -->
    <data android:scheme="geo" />
    <!-- 可选：支持谷歌地图的http/https位置链接 -->
    <data android:scheme="http" android:host="maps.google.com" android:pathPrefix="/maps" />
    <data android:scheme="https" android:host="maps.google.com" android:pathPrefix="/maps" />
</intent-filter>

这个配置会让系统识别你的应用可以处理geo://开头的位置链接，WhatsApp点击位置时会触发这类请求，你的应用就会出现在打开选项列表中。

iOS 配置步骤 #

打开ios/[你的项目名]/Info.plist，添加URL Types以支持geo协议：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>geo</string>
        </array>
    </dict>
</array>

配置完成后，重新编译iOS应用，WhatsApp点击位置时就会显示你的应用选项。

在React Native中解析并存储经纬度 #

使用React Native官方的Linking API来处理传入的位置链接，解析出经纬度后进行存储：

1. 监听链接打开事件 #

在你的入口组件（如App.js）中添加监听逻辑：

import { Linking, useEffect } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

useEffect(() => {
  // 处理应用启动时的初始链接
  Linking.getInitialURL().then(url => url && parseLocationUrl(url));

  // 监听应用运行时的链接打开事件
  const linkListener = Linking.addEventListener('url', (event) => {
    parseLocationUrl(event.url);
  });

  return () => linkListener.remove();
}, []);

2. 解析位置链接 #

编写解析函数提取经纬度：

const parseLocationUrl = (url) => {
  // 处理geo协议链接（格式：geo:lat,lng?xxx）
  if (url.startsWith('geo:')) {
    const [latLngStr] = url.replace('geo:', '').split('?');
    const [latitude, longitude] = latLngStr.split(',').map(Number);
    
    if (!isNaN(latitude) && !isNaN(longitude)) {
      storeLocation(latitude, longitude);
    }
  }
  // 可选：处理谷歌地图http/https链接
  else if (url.includes('maps.google.com')) {
    const searchParams = new URL(url).searchParams;
    const locationQuery = searchParams.get('q');
    
    if (locationQuery) {
      const [latitude, longitude] = locationQuery.split(',').map(Number);
      if (!isNaN(latitude) && !isNaN(longitude)) {
        storeLocation(latitude, longitude);
      }
    }
  }
};

3. 存储位置数据 #

以AsyncStorage为例，实现存储逻辑：

const storeLocation = async (lat, lng) => {
  try {
    await AsyncStorage.setItem('savedLocation', JSON.stringify({
      latitude: lat,
      longitude: lng,
      savedAt: new Date().toISOString()
    }));
    console.log('位置数据已存储');
  } catch (error) {
    console.error('存储位置失败:', error);
  }
};

注意：使用AsyncStorage需要先安装依赖：npm install @react-native-async-storage/async-storage

测试验证 #

• Android：重新编译应用，在WhatsApp中点击好友发送的位置，即可看到你的应用出现在打开选项列表。
• iOS：重新编译应用，若未显示可尝试重启设备，再测试WhatsApp位置打开流程。

内容的提问来源于stack exchange，提问作者Mureed Abbas