React Native：检测第三方导航应用是否已安装

完全可以实现。React Native通过第三方库或原生模块，能够检测设备上已安装的导航类应用，并唤起对应应用发起导航。

核心实现思路 #

1. 检测已安装应用：利用应用的URL Scheme（iOS）或包名（Android），通过第三方库或原生API判断应用是否存在
2. 唤起导航：构造对应应用的导航深度链接，调用系统API打开应用并传入导航参数

具体实现步骤 #

1. 安装依赖库 #

推荐使用react-native-app-link，它同时支持检测应用是否安装和唤起应用：

npm install react-native-app-link
# 或
yarn add react-native-app-link

2. 原生项目配置 #

iOS配置

在Info.plist中添加LSApplicationQueriesSchemes数组，声明需要检测的导航应用Scheme：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>comgooglemaps</string>
  <string>waze</string>
  <string>sygic</string>
  <string>tomtomhome</string>
</array>

Android配置（Android 11+）

在AndroidManifest.xml的<manifest>标签内添加<queries>，声明需要检测的应用包名：

<queries>
  <package android:name="com.google.android.apps.maps" />
  <package android:name="com.waze" />
  <package android:name="com.sygic.aura" />
  <package android:name="com.tomtom.gplay.navapp" />
</queries>

3. 编写业务代码 #

定义导航应用配置

先整理各导航应用的Scheme、包名和导航链接格式：

import { Platform } from 'react-native';
import AppLink from 'react-native-app-link';

const navigationApps = [
  {
    name: 'Google Maps',
    iosScheme: 'comgooglemaps://',
    androidPackage: 'com.google.android.apps.maps',
    getNavigationUrl: (lat, lng) => {
      return Platform.OS === 'ios' 
        ? `comgooglemaps://?saddr=&daddr=${lat},${lng}&directionsmode=driving`
        : `google.navigation:q=${lat},${lng}`;
    }
  },
  {
    name: 'Waze',
    iosScheme: 'waze://',
    androidPackage: 'com.waze',
    getNavigationUrl: (lat, lng) => `waze://?ll=${lat},${lng}&navigate=yes`
  },
  {
    name: 'Sygic',
    iosScheme: 'sygic://',
    androidPackage: 'com.sygic.aura',
    getNavigationUrl: (lat, lng) => `sygic://coordinate|${lat}|${lng}|我的目的地`
  },
  {
    name: 'TomTom',
    iosScheme: 'tomtomhome://',
    androidPackage: 'com.tomtom.gplay.navapp',
    getNavigationUrl: (lat, lng) => `tomtomhome://geo:${lat},longitude=${lng}?navigate=yes`
  }
];

检测可用导航应用

编写异步方法获取设备上已安装的导航应用：

const getAvailableNavigationApps = async () => {
  const availableApps = [];
  
  for (const app of navigationApps) {
    let isInstalled = false;
    
    if (Platform.OS === 'ios') {
      isInstalled = await AppLink.canOpenURL(app.iosScheme);
    } else {
      // Android通过包名检测，或使用market链接判断
      isInstalled = await AppLink.canOpenURL(`market://details?id=${app.androidPackage}`);
      // 若需更精准检测，可使用react-native-app-installed-check库的isAppInstalled方法
    }
    
    if (isInstalled) {
      availableApps.push(app);
    }
  }
  
  return availableApps;
};

展示菜单并处理唤起

实现UI组件展示可用应用，点击后唤起对应导航：

import { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, FlatList, StyleSheet } from 'react-native';

const NavigationSelector = ({ destLat, destLng }) => {
  const [availableApps, setAvailableApps] = useState([]);

  useEffect(() => {
    const fetchApps = async () => {
      const apps = await getAvailableNavigationApps();
      setAvailableApps(apps);
    };
    fetchApps();
  }, []);

  const handleOpenNavigation = async (app) => {
    try {
      const url = app.getNavigationUrl(destLat, destLng);
      await AppLink.openURL(url, {
        appName: app.name,
        appStoreId: '585027354', // Google Maps的App Store ID，未安装时跳转
        playStoreId: app.androidPackage // Android未安装时跳转Play Store
      });
    } catch (err) {
      console.error('唤起导航失败:', err);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>选择导航应用</Text>
      <FlatList
        data={availableApps}
        keyExtractor={(item) => item.name}
        renderItem={({ item }) => (
          <TouchableOpacity 
            style={styles.item} 
            onPress={() => handleOpenNavigation(item)}
          >
            <Text style={styles.itemText}>{item.name}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 16
  },
  item: {
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  itemText: {
    fontSize: 16
  }
});

export default NavigationSelector;

注意事项 #

• 部分导航应用的Scheme或包名可能随版本更新，需参考官方文档确认最新值
• iOS上canOpenURL仅能检测已在LSApplicationQueriesSchemes中声明的Scheme
• Android 11及以上必须配置<queries>标签，否则无法检测应用安装状态
• 若需完全自定义检测逻辑，可编写原生模块：iOS使用UIApplication.shared.canOpenURL，Android使用PackageManager.getPackageInfo

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