React Native Maps安卓使用问题：地图无法显示及Gradle编译错误

Hey there, let's break this down into two separate issues and fix them one by one—starting with that annoying Gradle error, then tackling the map not showing up.

This error pops up because your project's Gradle version is too old. The compileOnly dependency configuration was introduced in Gradle 3.0+, and the react-native-maps module is using it, but your older Gradle setup doesn't recognize it. Here are two solid solutions:

Option 1: Upgrade Your Project's Gradle Version (Recommended) #

Upgrading Gradle to a compatible version will prevent this issue long-term and keep your project aligned with modern React Native standards:

• Open your project's root android/build.gradle file, find the dependencies block, and update the Android Gradle Plugin version to 3.0.0 or higher. For example, if you're on React Native 0.60+, use something like:

  dependencies {
      classpath 'com.android.tools.build:gradle:3.5.3'
      // ... other dependencies
  }
  

• Next, update the Gradle wrapper version in android/gradle/wrapper/gradle-wrapper.properties. Match it to the plugin version (e.g., Gradle 5.4.1 works with plugin 3.5.3):

  distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
  

Option 2: Persist Your Fix with patch-package (If You Can't Upgrade Gradle) #

Directly modifying files in node_modules isn't ideal because changes get overwritten when you run npm install or yarn install. Use patch-package to keep your fix permanent:

1. Install patch-package as a dev dependency:

   npm install patch-package --save-dev
   

2. Go back to node_modules/react-native-maps/lib/android/build.gradle and replace compileOnly with provided (the older equivalent for Gradle <3.0):

   // Replace this
   compileOnly("com.facebook.react:react-native:+")
   // With this
   provided("com.facebook.react:react-native:+")
   

3. Generate a patch file:

   npx patch-package react-native-maps
   

This creates a patch in your project that will automatically apply whenever you install dependencies in the future.

Once the Gradle error is fixed, if the map still doesn't render, it's almost always related to API keys, permissions, or dependency mismatches. Follow these steps:

Step 1: Verify Your Google Maps API Key #

• Head to the Google Cloud Console, enable the Maps SDK for Android for your project, and generate an API key.
• Add the key to your android/app/src/main/AndroidManifest.xml inside the <application> tag:

  <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="YOUR_GOOGLE_MAPS_API_KEY"/>
  

• Make sure your API key is restricted to your app's package name and signing certificate to avoid unauthorized use (this is required for production, but can be skipped temporarily for testing).

Step 2: Check Required Permissions #

Add these permissions to your AndroidManifest.xml (above the <application> tag) to ensure the map can access location data and the internet:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

Step 3: Confirm Dependency Versions Are Compatible #

In your project's root android/build.gradle, define consistent versions for Google Play Services and Maps SDK to avoid conflicts:

ext {
    buildToolsVersion = "30.0.2"
    minSdkVersion = 21
    compileSdkVersion = 30
    targetSdkVersion = 30
    googlePlayServicesVersion = "17.0.0"
    mapsSdkVersion = "18.0.2"
}

These versions should match what react-native-maps expects (check the module's documentation for the latest compatible versions).

Step 4: Clean and Rebuild Your Project #

Cached build files often cause weird issues. Run these commands to start fresh:

cd android
./gradlew clean
cd ..
npx react-native run-android

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