de Mukhamed Khasanza

Cum se integrează hărțile în React Native folosind hărțile react-native

Cum se integreaza hartile in React Native folosind hartile react native

În prezent, aproape toate aplicațiile mobile au o funcție de hărți. A trebuit să integrez Google Maps în aplicația mea React Native și singura alegere a fost react-native-maps de Airbnb (este singura încă susținută de comunitatea React Native).

Am găsit câteva tutoriale despre cum să configurez această bibliotecă, dar niciunul nu a funcționat pe deplin pentru mine. Acest lucru se datorează faptului că a trebuit să rulez atât pe platformele iOS, cât și pe cele Android și să suport și Google Maps pentru iOS.

Să creăm o aplicație React Native de la zero folosind react-native-cli pentru a arăta, pas cu pas, cum este instalat totul. Dacă doriți să integrați hărți reactive-native pentru aplicația dvs. existentă, săriți Pasul 1.

Pasul 1: Instalați și configurați aplicația React Native

Dacă nu ați instalat interfața liniei de comandă React Native, rulați: npm install -g react-native-cli. Acum vă puteți crea proiectul, utilizând pur și simplu: react-native init ReactNativeMaps

Iată versiunile de dependență în momentul construirii acestui proiect:

  • „Reacționează”: „16.6.1”
  • „React-native”: „0,57,5”
  • „React-native-maps”: „0.22.1” – îl vom instala mai târziu.

Acum puteți încerca să vă rulați aplicația, react-native run-ios sau react-native run-android . De obicei, acest lucru funcționează fără probleme.

Acum să instalăm react-native-map: npm install --save react-native-maps după instalarea pachetului, ar trebui să-l conectați la aplicațiile dvs. native: react-native link react-native-maps.

1611628205 836 Cum se integreaza hartile in React Native folosind hartile react native
Ai și tu asta? Mișto, acum putem continua.

Pasul 3: configurați Apple Maps (iOS)

Va fi mai ușor dacă le configurăm separat pe platformă, așa că hai să o facem mai întâi pe iOS. Înainte de a integra Google Maps, vom verifica dacă Apple Maps funcționează corect. Adăugați următorul cod la componenta dvs. curentă de redare în care doriți să redați MapView.

import MapView from 'react-native-maps'
export default class App extends Component<Props> {  render() {    return (      <MapView        style={{flex: 1}}        region={{          latitude: 42.882004,          longitude: 74.582748,          latitudeDelta: 0.0922,          longitudeDelta: 0.0421        }}        showsUserLocation={true}      />    );  }}

Puteți testa orice locație doriți, trebuie doar să specificați latitudinea și longitudinea corespunzătoare. După cum puteți vedea, am activat locația utilizatorului prin simpla adăugare a showUserLocation prop pentru componenta MapView. Dacă rulați pe dispozitivul real, veți vedea locația dvs. curentă.

1611628205 128 Cum se integreaza hartile in React Native folosind hartile react native

Deci, după cum puteți vedea, în mod implicit Apple Maps funcționează deja. Mai mult decât atât, dacă ați conectat totul corect și ați activat locația utilizatorului, de fapt a făcut multe lucruri pentru noi (permisiunea utilizatorului pentru locație cu un mesaj implicit). Dacă ați venit din dezvoltarea iOS nativă, atunci probabil că știți ce este un fișier info.plist.

Pasul 4: Instalați pachetul Cocoapods și „GoogleMaps” (iOS)

Apple Maps a fost ușor, nu? De acord – deci să vedem ce are Google Maps pentru noi. Trebuie să instalăm Google Maps SDK pentru iOS. Vom folosi Cocoapods. Dacă nu l-ați folosit înainte, rulați sudo gem install cocoapods.

Acum trebuie să creați un Podfile în care să specificați dependențele aplicației dvs. iOS. Navigați la iOS / dosarul dvs. din aplicația React Native și rulați: pod init sau poți folosi touch Podfile ar trebui să aveți ceva similar cu acesta:

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

După cum puteți vedea, am adăugat podul GoogleMaps și acum trebuie să-l instalăm. Dacă sunteți încă pe iOS / folder, rulați: pod install . Dacă încercați să îl rulați acum, veți primi probabil o eroare:

1611628206 323 Cum se integreaza hartile in React Native folosind hartile react native

Bine, să facem ce vrea. Acum ar trebui să deschidem spațiul de lucru xCode.

1611628206 239 Cum se integreaza hartile in React Native folosind hartile react native

Navigați la folderul AirGoogleMaps din node_modules /

1611628206 300 Cum se integreaza hartile in React Native folosind hartile react native

Și trageți-l în partea de sus a proiectului dvs. xCode

1611628206 559 Cum se integreaza hartile in React Native folosind hartile react native

Vă rugăm să încercați să construiți proiectul dvs. xCode, dacă eșuați

1611628207 422 Cum se integreaza hartile in React Native folosind hartile react native

Ar trebui să adăugați HAVE_GOOGLE_MAPS=1Preprocesor macro pentru a crea setări

1611628207 694 Cum se integreaza hartile in React Native folosind hartile react native

Pasul 5: obțineți cheia API Google Maps, rulați aplicația iOS cu Google Maps

Deci, acum trebuie să generăm un Cheia API Google Maps.

1611628208 482 Cum se integreaza hartile in React Native folosind hartile react native

Copiați cheia API și adăugați la fișierul AppDelegate.m.

#import <GoogleMaps/GoogleMaps.h>

[GMSServices provideAPIKey:@"YOUR_API_KEY"]

1611628208 383 Cum se integreaza hartile in React Native folosind hartile react native

Acum puteți spune componentei dvs. MapView că sunteți gata să utilizați Google Maps.

1611628208 277 Cum se integreaza hartile in React Native folosind hartile react native

Da, rulați aplicația iOS. Și veți obține Google Maps.

Sper.

Pasul 6: Să încercăm Android acum

Bine, acum putem renunța la xCode și să încercăm react-native run-android. Dacă primiți la fel:

1611628208 984 Cum se integreaza hartile in React Native folosind hartile react native

verifică-ți android / app / build.gradle fişier. Și înlocuiți acest lucru:

compile project(':react-native-maps') cu asta:

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'

Ah, și nu uitați să adăugați API_KEY la fișierul AndroidManifest.xml.

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

Da, acum aplicația dvs. rulează pe ambele platforme. te rog verifică react-native-maps repo pentru lucruri mai distractive pe care le puteți face cu componenta MapView.

Concluzie

Sper că primul meu articol despre Medium ți-a fost de ajutor. Vă rugăm, dacă vedeți greșeli, nu ezitați să lăsați un comentariu, vă voi aprecia comentariile!