Hogyan integrálhatjuk a térképeket a React Native-ba a reakció-native-maps segítségével

Manapság szinte minden mobilalkalmazás rendelkezik térképi funkcióval. Integrálnom kellett a Google Maps-et a React Native alkalmazásomba, és az egyetlen választás az Airbnb által reagált-native-maps volt (ez az egyetlen, amelyet a React Native közösség még támogat).

Számos oktatóanyagot találtam a könyvtár felállításáról, de egyik sem működött teljesen. Ennek oka az volt, hogy mind az iOS, mind az Android platformon kellett futtatnom, és támogatnom kellett a Google Maps for iOS rendszert.

Hozzunk létre egy React Native alkalmazást a semmiből a reag-native-cli használatával, hogy lépésről lépésre megmutassuk, hogyan van minden telepítve. Ha integrálni szeretné a reakció-natív térképeket meglévő alkalmazásához, hagyja ki az 1. lépést .

1. lépés: Telepítse és állítsa be a React Native alkalmazást

Ha még nem telepítette a reagálnak Native parancssori felület, fuss: npm install -g react-native-cli. Most egyszerűen elkészítheti projektjét:react-native init ReactNativeMaps

Itt vannak a függőségi verziók a projekt elkészítésekor:

  • „Reagál”: „16.6.1”
  • „Reagál-natív”: „0.57.5”
  • „React-native-maps”: „0.22.1” - ezt később telepítjük.

Most megpróbálhatja futtatni az alkalmazást, react-native run-iosill react-native run-android. Általában ez problémamentesen működik.

2. lépés: A Reagál-natív-térképek csomag hozzáadása és összekapcsolása

Most telepíteni reagál-natív térkép: npm install --save react-native-mapscsomag telepítése után az akkor kapcsolja be a natív alkalmazások: react-native link react-native-maps.

3. lépés: Az Apple Maps (iOS) beállítása

Könnyebb lesz, ha platformonként külön állítjuk be őket, ezért először iOS-en tegyük. A Google Maps integrálása előtt ellenőrizni fogjuk, hogy az Apple Maps megfelelően működik-e. Adja hozzá a következő kódot az aktuális megjelenítési összetevőhöz, ahol meg szeretné jeleníteni a MapView-t.

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

Tesztelheti a kívánt helyet, csak adja meg a megfelelő szélességi és hosszúsági fokot. Mint láthatja, egyszerűen engedélyeztem a felhasználói helymeghatározást azzal, hogy hozzáadtam a showUserLocationjavaslatot a MapView komponenshez. Ha valódi eszközön fut, akkor meglátja az aktuális tartózkodási helyét.

Tehát, amint láthatja, alapértelmezés szerint az Apple Maps már működik. Sőt, ha mindent helyesen kapcsolt össze, és engedélyezte a felhasználó helyét, akkor valójában sok mindent megtett értünk (a hely felhasználói engedélye alapértelmezett üzenettel). Ha natív iOS fejlesztésből származik, akkor valószínűleg tudja, mi az az info.plist fájl.

4. lépés: Telepítse a Cocoapodokat és a „GoogleMaps” csomagot (iOS)

Az Apple Maps egyszerű volt, igaz? Megállapodás - lássuk, mi a számunkra a Google Maps. Telepítenünk kell a Google Maps SDK-t az iOS rendszerhez. Cocoapodokat fogunk használni. Ha még nem használta, fuss sudo gem install cocoapods.

Most létre kell hoznia egy Podfile fájlt, ahol megadhatja az iOS alkalmazás függőségeit. Keresse meg az iOS / mappát a React Native alkalmazásban, és futtassa: pod initvagy használhatja touch Podfile, hogy ehhez valami hasonló kellene:

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

Mint láthatja, hozzáadtam a pod GoogleMaps alkalmazást, és most telepítenünk kell. Ha még mindig az iOS / mappa, fuss: pod install. Ha most megpróbálja futtatni, valószínűleg hibát fog kapni:

Oké, tegyük meg, amit akar. Most meg kell nyitnunk az xCode munkaterületet.

Navigáljon az AirGoogleMaps mappába a node_modules /

És húzza az xCode projekt tetejére

Kérjük, próbálja felépíteni az xCode projektet, ha nem sikerül

Hozzá kell adnia az HAVE_GOOGLE_MAPS=1Előfeldolgozó makrót a Build beállításokhoz

5. lépés: Szerezze be a Google Maps API kulcsot, futtassa az iOS alkalmazást a Google Maps segítségével

Tehát most létre kell hoznunk egy Google Maps API-kulcsot .

Másolja át az API kulcsát, és adja hozzá az AppDelegate.m fájlhoz.

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