Sådan integreres kort i React Native ved hjælp af react-native-maps

I dag har næsten alle mobile applikationer en kortfunktion. Jeg var nødt til at integrere Google Maps i min React Native-applikation, og det eneste valg var react-native-kort fra Airbnb (det er det eneste, der stadig understøttes af React Native-samfundet).

Jeg fandt flere tutorials om, hvordan jeg opretter dette bibliotek, men ingen fungerede fuldt ud for mig. Dette var fordi jeg var nødt til at køre på både iOS- og Android-platforme og også understøtte Google Maps til iOS.

Lad os oprette en React Native-applikation fra bunden ved hjælp af react-native-cli til trin for trin at vise, hvordan alt er installeret. Hvis du vil integrere react-native-maps til din eksisterende app, skal du springe trin 1 over .

Trin 1: Installer og konfigurer React Native-applikationen

Hvis du ikke har installeret React Native command line interface, kør: npm install -g react-native-cli. Nu kan du oprette dit projekt ved blot at bruge:react-native init ReactNativeMaps

Her er afhængighedsversionerne på tidspunktet for opbygningen af ​​dette projekt:

  • “Reagere”: “16.6.1”
  • “React-native”: “0.57.5”
  • “React-native-maps”: “0.22.1” - vi installerer denne senere.

Nu kan du prøve at køre din app, react-native run-ioseller react-native run-android. Normalt fungerer dette uden problemer.

Trin 2: Tilføj og link reaktion-native-maps-pakke

Lad os nu installere reagere-indfødte-map: npm install --save react-native-mapsefter installation af pakke, du skal linke det til dine indfødte apps: react-native link react-native-maps.

Trin 3: Konfigurer Apple Maps (iOS)

Det bliver lettere, hvis vi konfigurerer dem separat efter platform, så lad os først gøre det på iOS. Før vi integrerer Google Maps, kontrollerer vi, om Apple Maps fungerer korrekt. Føj følgende kode til din nuværende gengivelseskomponent, hvor du vil gengive din MapView.

import MapView from 'react-native-maps'
export default class App extends Component { render() { return (  ); }}

Du kan teste den placering, du ønsker, bare angive den passende bredde og længdegrad. Som du kan se, aktiverede jeg brugerplacering simpelthen ved at tilføje showUserLocationprop til MapView-komponenten. Hvis du kører på den rigtige enhed, vil du se din aktuelle placering.

Så som du kan se, fungerer Apple Maps som standard allerede. Mere end det, hvis du linkede alt korrekt og aktiverede brugerplaceringen, har det faktisk gjort mange ting for os (brugertilladelsen til placeringen med en standardmeddelelse). Hvis du kom fra native iOS-udvikling, ved du sandsynligvis, hvad der er en info.plist-fil.

Trin 4: Installer Cocoapods og 'GoogleMaps' pakke (iOS)

Apple Maps var let, ikke? Aftalt - så lad os se, hvad Google Maps har for os. Vi er nødt til at installere Google Maps SDK til iOS. Vi bruger Cocoapods. Hvis du ikke har brugt det før, skal du køre sudo gem install cocoapods.

Nu skal du oprette en Podfile, hvor du angiver afhængigheden af ​​din iOS-applikation. Naviger til din iOS / mappe i din React Native-app, og kør: pod initeller du kan bruge, touch Podfiledu skal have noget der ligner dette:

# platform :ios, '9.0'
target 'ReactNativeMaps' do
# Pods for ReactNativeMaps
pod 'GoogleMaps'
end

Som du kan se, tilføjede jeg pod GoogleMaps, og nu skal vi installere det. Hvis du stadig er på iOS / mappe, kør: pod install. Hvis du prøver at køre det nu, får du sandsynligvis en fejl:

Okay, lad os gøre, hvad det vil. Nu skal vi åbne xCode-arbejdsområdet.

Naviger til AirGoogleMaps-mappen fra node_modules /

Og træk det til toppen af ​​dit xCode-projekt

Prøv at opbygge dit xCode-projekt, hvis du fejler

Du skal tilføje HAVE_GOOGLE_MAPS=1Preprocessor Macro til Build Settings

Trin 5: Få Google Maps API-nøgle, kør iOS-app med Google Maps

Så nu skal vi generere en Google Maps API-nøgle .

Kopier din API-nøgle, og tilføj den til filen AppDelegate.m.

#import .h>

[GMSServices provideAPIKey:@"YOUR_API_KEY"]

Now you can tell your MapView component that you are ready to use Google Maps.

Oh yesss, please run your iOS app. And you will get Google Maps.

I hope.

Step 6: Let’s try Android now

Okay now we can quit xCode and let’s just try react-native run-android. If you are getting the same as this:

check your android/app/build.gradle file. And replace this:

compile project(':react-native-maps') with this:

implementation(project(':react-native-maps')){ exclude group: 'com.google.android.gms', module: 'play-services-base' exclude group: 'com.google.android.gms', module: 'play-services-maps' }implementation 'com.google.android.gms:play-services-base:12.0.0'implementation 'com.google.android.gms:play-services-maps:12.0.0'

Oh, and don’t forget to add API_KEY to AndroidManifest.xml file.

Yes, now your app is running on both platforms. Please check the react-native-maps repo for more fun things that you can do with your MapView component.

Conclusion

Hope my first article on Medium was helpful for you. Please, if you see any mistakes don’t hesitate to leave a comment, I will appreciate your comments!