求助：react-native-maps-directions在iOS地图不显示路线，安卓正常

Hey there, sorry to hear you're stuck with this iOS-only issue using react-native-maps-directions—let's break down the most likely fixes that should get your routes showing up on iOS:

• Verify Google Cloud API Configurations
  This is the #1 culprit for iOS-specific failures:

  • Make sure your Google Cloud project has both the Maps SDK for iOS and Directions API enabled (it's easy to forget the iOS SDK when setting up for Android first).
  • Check your API key restrictions: If you've set app-based restrictions, ensure your iOS app's Bundle ID is added to the allowed list in the Google Cloud console.
  • Confirm you haven't exceeded your Directions API quota—free quotas can run out fast, and this will silently block route requests on iOS.

• Set the Map Provider to Google
  By default, react-native-maps uses Apple Maps on iOS, but react-native-maps-directions relies on Google Maps services. You need to explicitly set the provider:

  import { MapView, PROVIDER_GOOGLE } from 'react-native-maps';
  import MapViewDirections from 'react-native-maps-directions';
  
  // In your component
  <MapView
    provider={PROVIDER_GOOGLE} // Critical for iOS
    style={{ flex: 1 }}
    region={yourMapRegion}
  >
    <MapViewDirections
      origin={yourOriginCoords}
      destination={yourDestCoords}
      apikey="YOUR_GOOGLE_API_KEY"
    />
  </MapView>
  

• Double-Check iOS Info.plist Settings
  iOS requires specific configs for Google Maps to work:

  • Add your Google Maps API key directly to Info.plist:

    <key>GoogleMapsAPIKey</key>
    <string>YOUR_GOOGLE_API_KEY</string>
    

  • Ensure you've added location usage descriptions if your app uses location services:

    <key>NSLocationWhenInUseUsageDescription</key>
    <string>We need your location to show routes</string>
    

  • Confirm NSAppTransportSecurity allows HTTPS requests to Google's servers (you can either disable ATS for all domains temporarily to test, or whitelist Google's endpoints).

• Debug Route Request Errors
  Add an error handler to MapViewDirections to get specific feedback on why routes aren't loading:

  <MapViewDirections
    // ... other props
    onError={(error) => {
      console.error('Route fetch failed:', error.message);
      // This will tell you if it's an API key issue, quota limit, or invalid coordinates
    }}
  />
  

  Also, verify your origin and destination are valid coordinate objects ({ latitude: xx.xxxx, longitude: yy.yyyy }—iOS is stricter about format than Android).

• Update Dependencies & Reinstall Pods
  Compatibility issues between react-native-maps, react-native-maps-directions, and your React Native version can cause iOS-specific bugs. Try updating to the latest stable versions:

  npm install react-native-maps@latest react-native-maps-directions@latest
  cd ios && pod install --repo-update && cd ..
  

  If you're on an older React Native version, check the dependency docs for compatible versions to avoid breaking changes.

Start with the API config and provider setting—those are the most common fixes. If none of these work, the error handler should give you a clear clue about what's going wrong!

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