Kuinka integroida karttoja React Native -sovellukseen käyttämällä reagoivia-natiivikarttoja

Nykyään melkein kaikissa mobiilisovelluksissa on karttatoiminto. Minun piti integroida Google Maps React Native -sovellukseeni, ja ainoa vaihtoehto oli Airbnb: n reaktiokartat (se on ainoa, jota React Native -yhteisö tukee edelleen).

Löysin useita oppaita tämän kirjaston perustamisesta, mutta yksikään ei toiminut täysin minulle. Tämä johtui siitä, että minun piti ajaa sekä iOS- että Android-alustoilla ja tukea myös Google Mapsia iOS: lle.

Luodaan React Native -sovellus alusta alkaen reagoi-native-clin avulla osoittamaan askel askeleelta, miten kaikki on asennettu. Jos haluat integroida reaaliaikaiset kartat nykyiseen sovellukseesi, ohita vaihe 1 .

Vaihe 1: Asenna ja asenna React Native -sovellus

Jos et ole asentanut Reagoi Native komentoriviltä komennolla: npm install -g react-native-cli. Nyt voit luoda projektisi yksinkertaisesti käyttämällä:react-native init ReactNativeMaps

Tässä ovat riippuvuusversiot tämän projektin rakentamisen aikaan:

  • "Reagoi": "16.6.1"
  • "Reagoi kotimaiseen": "0.57,5"
  • “React-native-maps”: “0.22.1” - asennamme tämän myöhemmin.

Nyt voit yrittää suorittaa sovelluksesi react-native run-iostai react-native run-android. Yleensä tämä toimii ilman ongelmia.

Vaihe 2: Lisää ja linkitä reagoi-natiivikartat-paketti

Nyt asentaa reagoida-natiivi-kartta: npm install --save react-native-mapsPaketin asentamisen jälkeen kannattaa linkittää sen sovelluksien: react-native link react-native-maps.

Vaihe 3: Määritä Apple Maps (iOS)

Se on helpompaa, jos asetamme ne erikseen alustan mukaan, joten tehdään ensin iOS: ssä. Ennen Google Mapsin integrointia tarkistamme, toimiiko Apple Maps oikein. Lisää seuraava koodi nykyiseen renderöintikomponenttiin, johon haluat tehdä MapView-kuvan.

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

Voit testata haluamasi sijainnin, määritä vain sopiva leveys- ja pituusaste. Kuten näette, otin käyttäjän sijainnin käyttöön lisäämällä showUserLocationehdotuksen MapView-komponenttiin. Jos käytät todellista laitetta, näet nykyisen sijaintisi.

Joten, kuten näette, Apple Maps toimii oletusarvoisesti. Enemmän, jos linkitit kaiken oikein ja otit käyttäjän sijainnin käyttöön, se on itse asiassa tehnyt meille paljon asioita (käyttäjän käyttöoikeus sijaintiin oletusviestillä). Jos tulit alkuperäisestä iOS-kehityksestä, tiedät todennäköisesti mikä on info.plist-tiedosto.

Vaihe 4: Asenna Cocoapods ja GoogleMaps-paketti (iOS)

Apple Maps oli helppoa, eikö? Hyväksytty - katsotaanpa, mitä Google Maps tarjoaa meille. Meidän on asennettava Google Maps SDK iOS: lle. Käytämme Cocoapodeja. Jos et ole käyttänyt sitä aiemmin, suorita sudo gem install cocoapods.

Nyt sinun on luotava Podfile, jossa määrität iOS-sovelluksesi riippuvuudet. Siirry React Native -sovelluksen iOS / kansioon ja suorita: pod inittai voit käyttää, että touch Podfilesinulla pitäisi olla jotain vastaavaa kuin tämä:

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

Kuten näette, lisäsin pod GoogleMapsin ja nyt meidän on asennettava se. Jos olet vielä iOS / kansioon, suorita: pod install. Jos yrität suorittaa sen nyt, saat todennäköisesti virheen:

Okei, tehdään mitä se haluaa. Nyt meidän pitäisi avata xCode-työtila.

Siirry AirGoogleMaps-kansioon osoitteesta node_modules /

Ja vedä se xCode-projektisi yläosaan

Yritä rakentaa xCode-projekti, jos epäonnistut

Sinun tulisi lisätä HAVE_GOOGLE_MAPS=1esiprosessorin makro koontiasetuksiin

Vaihe 5: Hanki Google Maps API -avain, Suorita iOS-sovellus Google Mapsin kanssa

Joten nyt meidän on luotava Google Maps -sovellusliittymäavain .

Kopioi API-avain ja lisää AppDelegate.m-tiedostoon.

#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!