React Native实现导航应用列表跳转功能遇阻求助

一、替代库推荐（比你试过的更稳定） #

放弃维护不佳的react-native-check-app-install、react-native-installed-application，改用以下两种更可靠的方案：

1. react-native-app-link #

这个库能自动检测设备上已安装的应用，仅展示可用选项，同时处理跳转逻辑：

• 安装：

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

• 核心代码：

  import AppLink from 'react-native-app-link';
  
  const openNavigationApps = async () => {
    const targetCoords = '37.7749,-122.4194'; // 终点坐标
    const navApps = [
      {
        appName: 'apple-maps',
        url: `http://maps.apple.com/?daddr=${targetCoords}`,
        appStoreId: '585027354',
        playStoreId: '',
      },
      {
        appName: 'google-maps',
        url: `comgooglemaps://?daddr=${targetCoords}&directionsmode=driving`,
        appStoreId: '585027354',
        playStoreId: 'com.google.android.apps.maps',
      },
      {
        appName: 'waze',
        url: `waze://?ll=${targetCoords}&navigate=yes`,
        appStoreId: '323229106',
        playStoreId: 'com.waze',
      },
    ];
  
    try {
      await AppLink.maybeOpenURL(navApps, {
        appName: '导航应用',
        appStoreId: '585027354',
        playStoreId: '',
      });
    } catch (err) {
      console.error('打开导航应用失败:', err);
    }
  };
  

2. Expo Linking（Expo 项目专用） #

如果用Expo开发，直接用官方的expo-linking实现检测+跳转：

import * as Linking from 'expo-linking';
import { Alert } from 'react-native';

const checkAndOpenNavigation = async () => {
  const targetCoords = '37.7749,-122.4194';
  const navOptions = [
    { name: 'Apple Maps', url: `http://maps.apple.com/?daddr=${targetCoords}` },
    { name: 'Google Maps', url: `comgooglemaps://?daddr=${targetCoords}` },
    { name: 'Waze', url: `waze://?ll=${targetCoords}&navigate=yes` },
  ];

  // 过滤出可打开的应用
  const availableApps = await Promise.all(
    navOptions.map(async app => {
      const canOpen = await Linking.canOpenURL(app.url);
      return canOpen ? app : null;
    })
  ).then(res => res.filter(Boolean));

  if (availableApps.length === 0) {
    Alert.alert('提示', '未检测到可用的导航应用，请先安装');
    return;
  }

  // 弹出选择弹窗
  const selectedIndex = await Alert.alert(
    '选择导航应用',
    '',
    availableApps.map((app, idx) => ({ text: app.name, onPress: () => idx }))
  );

  if (selectedIndex !== null) {
    await Linking.openURL(availableApps[selectedIndex].url);
  }
};

二、原生API手动实现（无需第三方库） #

直接用React Native内置的Linking模块，配合平台特定配置即可：

1. 平台配置 #

• iOS：在Info.plist中添加LSApplicationQueriesSchemes数组，声明要检测的URL Scheme：

  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>comgooglemaps</string>
    <string>waze</string>
    <string>maps</string>
  </array>
  

• Android 11+：在AndroidManifest.xml中添加<queries>标签，声明要检测的应用包名：

  <queries>
    <package android:name="com.google.android.apps.maps" />
    <package android:name="com.waze" />
  </queries>
  

2. 核心代码 #

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

const checkAndOpenNavigation = async () => {
  const targetCoords = '37.7749,-122.4194';
  // 分平台定义导航应用配置
  const navApps = Platform.select({
    ios: [
      { name: 'Apple Maps', url: `http://maps.apple.com/?daddr=${targetCoords}` },
      { name: 'Google Maps', url: `comgooglemaps://?daddr=${targetCoords}` },
      { name: 'Waze', url: `waze://?ll=${targetCoords}&navigate=yes` },
    ],
    android: [
      { name: 'Google Maps', url: `google.navigation://?q=${targetCoords}&mode=d` },
      { name: 'Waze', url: `waze://?ll=${targetCoords}&navigate=yes` },
      { name: '高德地图', url: `amapuri://route/plan/?dlat=37.7749&dlon=-122.4194&dev=0` },
    ],
  });

  // 过滤可用应用
  const availableApps = [];
  for (const app of navApps) {
    try {
      const canOpen = await Linking.canOpenURL(app.url);
      if (canOpen) availableApps.push(app);
    } catch (err) {
      console.error(`检测${app.name}失败:`, err);
    }
  }

  if (availableApps.length === 0) {
    Alert.alert('提示', '没有可用的导航应用');
    return;
  }

  // 展示选择弹窗
  const buttons = availableApps.map(app => ({
    text: app.name,
    onPress: () => Linking.openURL(app.url),
  }));
  buttons.push({ text: '取消', style: 'cancel' });

  Alert.alert('选择导航应用', '', buttons);
};

三、为什么你之前的库失效？ #

react-native-check-app-install这类库要么长期未维护，要么在Android 11+的包可见性限制下无法正常检测应用。而上面的方案要么基于活跃维护的第三方库，要么直接调用官方Linking模块，兼容性和稳定性更有保障。

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