Um dies auf einer Karte anzuzeigen, haben wir diese Kartenbildschirmkomponente, die derzeit nur einige Dummy-Inhalte enthält, und jetzt müssen wir in
der Lage sein, eine interaktive Karte zu rendern, und dafür hat uns die Expo wieder behandelt.
Dort finden Sie
das Kartenansichtspaket.
Jetzt hinter den Kulissen wird ein Paket namens React Native Maps verwendet, das Sie auch in
Nicht-Expo-Apps verwenden können. Übrigens können viele dieser Pakete in Nicht-Expo-Apps verwendet werden, und darauf
werde ich in den Building-Apps zurückkommen Ohne Expo-Modul, aber im Moment können
wir dies einfach bequem installieren, indem wir diesen Befehl ausführen. Dadurch wird das React Native
Maps-Paket installiert und wir können es
so verwenden, wie wir es hier in diesem Beispiel sehen.
Übrigens finden Sie auch in der offiziellen Dokumentation unter diesem Link weitere Verwendungsbeispiele, da Sie dort
alles über die Verwendung dieses Pakets erfahren können.
Einige Beispiele werden hier natürlich auch in diesem Modul gezeigt.
Lassen Sie uns also expo install react-native-maps ausführen, um dieses Paket hier zu installieren. Auf
diese Weise können wir verschiedene Komponenten verwenden, die interaktive Karten rendern.
Warten wir also, bis dies abgeschlossen ist, und wenn dies abgeschlossen ist, können wir in der Kartenbildschirmkomponente mit der Verwendung dieser Karte
beginnen.
Um die Karte zu verwenden, können wir jetzt die Kartenansicht aus der React Native-Karte importieren. Aus diesem Paket haben wir sie gerade
installiert und können so eine Karte auf dem Bildschirm rendern.
Wie funktioniert das nun?
Lassen Sie uns hier in unseren Kartenbildschirm gehen und anstatt diese Ansicht hier zurückzugeben, werde ich
eine solche Kartenansicht zurückgeben.
Jetzt kann die Kartenansicht vorerst ein selbstschließendes Tag
sein. Wir können später auch einige Markierungen hinzufügen, aber jetzt rendern wir sie einfach so und jetzt
müssen Sie diese Kartenansicht konfigurieren. Um genau zu
sein, benötigt es eine Region, die angibt, wo es sich beim Laden konzentrieren soll, also auf
welchen Kartenteil oder welchen Teil der Welt es sich beim Laden konzentrieren soll.
Also müssen wir hier eine solche Region erstellen und ich werde das in einer konstanten benannten Kartenregion
speichern und eine Region ist tatsächlich ein Objekt mit vier Eigenschaften und Sie müssen sie
so benennen - Breitengrad und nicht
Breitengrad, sondern wirklich ausgeschriebener Breitengrad, Längengrad, BreitengradDelta und LängengradDelta.
Die Deltas legen im Grunde den Zoomfaktor fest, da dies beschreibt, wie viel Platz Sie um die Mitte sehen
können, die Sie mit diesen beiden Punkten beschreiben.
Das beschreibt also einen Punkt, zusammen mit
den beiden Deltas, eine Oberfläche.
Jetzt können wir hier mit einigen Dummy-Werten beginnen, bevor
wir später auch sicherstellen, dass wir diese vorab ausfüllen können.
Hier setze ich dies auf den Dummy-Wert 37. 78 und -122. 43, die
sich in der Bay Area um das Google-Hauptquartier befindet, und hier nimmt
latitudeDelta 0 an. 0922 und dann 0. 0421 fand ich, dass
dies als Region recht gut funktioniert.
Natürlich können Sie mit diesen Zahlen experimentieren, aber am Ende geben Sie diese Kartenregion hier ein.
Nun sollte dies eine Karte auf dem Bildschirm rendern, jetzt müssen
wir sie nur noch erreichen können und
dafür gehe ich zurück zur Standortauswahl und möchte sie auf zwei verschiedene Arten erreichen - eine ist
mit Hilfe einer Schaltfläche was ich noch nicht hinzugefügt habe. Neben der Schaltfläche zum Abrufen des Benutzerstandorts möchte
ich eine zweite Schaltfläche haben, die neben der ersten Schaltfläche angezeigt wird. Daher füge ich eine Ansicht hinzu,
um beide zu verpacken, und verschiebe diese Schaltfläche hier hinein und habe dort eine zweite
Schaltfläche und diese Schaltfläche wird im Allgemeinen auf die gleiche Weise konfiguriert, aber ich werde Pick on Map sagen und natürlich werde
ich eine andere Methode, eine andere Funktion auslösen. Hier möchte ich eine Funktion auslösen, die der Pick-on-Map-Handler ist, und ich werde sie daher verwenden
Dies hier
und das ist eine Möglichkeit, dies auszuwählen. Die andere Möglichkeit, dies auszuwählen oder zur
Karte zu gelangen, besteht darin, auf die Kartenvorschau zu klicken. Bevor ich dies implementiere, möchte ich diese Ansicht, die die beiden Schaltflächen enthält, schnell formatieren.
Ich werde ihm eine Stilkennung für Aktionen geben und dann dort unten können Aktionen auf relativ einfache Weise
konfiguriert werden.
Ich möchte, dass das Element nebeneinander sitzt, damit die Biegerichtung eine Zeile und keine Spalte ist. Ausrichten von Inhalten kann Platz
sein, um den verfügbaren freien Platz um beide Schaltflächen zu verteilen. Ich nehme für diese
Zeile eine Breite von 100% und das wars.
Damit habe ich meine Schaltflächen
hier. Jetzt müssen wir sicherstellen, dass wir auch auf die Kartenvorschau tippen können. Lassen Sie mich dazu
zur Kartenvorschau gehen und diese tatsächlich nicht in eine Ansicht, sondern in eine berührbare Komponente und hier einbinden Ich verwende nur
berührbare Deckkraft. Natürlich können Sie auch andere berührbare Komponenten verwenden, die auf der Plattform basieren,
auf
der Sie ausgeführt werden. Ich möchte dies relativ einfach halten, daher werde ich diese Ansicht hier einfach durch berührbare
Deckkraft ersetzen. Habe
meinen Stil hier, das ist in Ordnung, aber natürlich auch den onPress-Handler und dort möchte ich eine
Funktion auslösen, die ich von außen über Requisiten erhalten möchte.
Ich werde das auch nur onPress nennen, aber Sie können dieser Requisite einen beliebigen Namen geben.
Auf diese Weise können wir jetzt eine onPress-Requisite in die
Kartenvorschau einfügen, sodass ich hier in der Standortauswahl onPress in der Kartenvorschau anhören kann und dort natürlich dieselbe
Funktion auslösen möchte, wie wenn ich auf die Schaltfläche unten klicke Dort.
Ich möchte den Pick-on-Map-Handler auslösen, also
mache ich das so.
Jetzt sollte der Pick-on-Kartenhandler einfach zum Kartenbildschirm rechts gehen,
damit wir dort Requisiten sagen können. Navigation. Karte navigieren und das wars für die Sekunde.
Wenn wir dies jetzt speichern, sollten wir in der Lage sein, diese interaktive Vollbildkarte zu erreichen, auf der wir noch
keinen Ort auswählen können, aber zumindest anzeigen können.
Wenn ich jetzt hier auf das Plus klicke und dann die Karte auswähle, wird eine Fehlermeldung
angezeigt. Warum ist das so? Nun, das hat nichts mit nativen Modulen zu tun. Sie werden sich vielleicht daran erinnern, dass
die Navigationsstütze nur für Komponenten verfügbar ist, die direkt als Bildschirme geladen werden, was der Standortwähler natürlich
nicht ist. Jetzt
gibt es verschiedene Problemumgehungen. Es
gibt eine Komponente höherer Ordnung, die wir
verwenden können. Wir können auch ein reaktionsnavigationsspezifisches Hook-Paket installieren. Hier gehe ich
jedoch einfach vor und stelle sicher, dass ich eine Navigationsstütze für die Standortauswahl von habe Wenn
ich zum neuen Ortsbildschirm gehe, auf dem ich die Standortauswahl verwende, stelle
ich diese Navigationsstütze ein und leite die Requisiten weiter. Navigation, die ich hier zur Verfügung habe, da
dies eine Komponente ist, die direkt über einen Navigator geladen wird. Jetzt
leite ich nur den Zugriff auf meine Navigations-Requisiten weiter. Und damit, wenn wir jetzt zurückgehen und darauf
klicken, laden wir diese Karte hier oder zumindest einen Kartenbildschirm, aber wo
ist die Karte?
Nun, die Karte ist unsichtbar, denn und das ist wichtig, für Ihre Karte müssen Sie einen Stil hinzufügen,
und hier werde ich Stile hinzufügen. map und es kann ein sehr einfacher Stil sein, aber Sie
müssen nur definieren, wie groß es sein soll, da es standardmäßig keinen Platz einnimmt.
Wenn Sie hier also einfach flex auf eins setzen und ihm mitteilen, dass er den gesamten verfügbaren Platz beanspruchen soll,
stellen Sie sicher, dass Sie eine Karte sehen.
Wenn Sie also darauf klicken, wird unsere Karte geladen. Erwähnenswert ist auch, dass Sie unter iOS automatisch Apple Maps verwenden.
Wenn Sie möchten, können Sie dort auch Google Maps verwenden. In den offiziellen Dokumenten
erfahren Sie, wie Sie unter Android immer Google Maps verwenden.
Wenn ich hier auf Karte auswählen klicke, werden
wir auch sehen, dass, sobald wir diesen neuen Bildschirm geladen haben, er hier ist. Jetzt können wir natürlich auch zu diesem Bildschirm gehen,
indem wir hier auf unsere
Vorschau klicken. Das
haben wir richtig eingerichtet, damit es auch funktioniert, natürlich auch unter iOS.
Übrigens ist die Animation hier nicht besonders flüssig, auf einem realen Gerät wird es so sein, also ist
das kein Problem, das ist nur hier auf dem Emulator.
Damit haben wir unsere Karte hier und auf dieser Karte können wir scrollen. Auch hier ist es auf dem Simulator
möglicherweise etwas klein, auf einem realen Gerät jedoch nicht.
Hier können Sie also scrollen, Sie können später auch kneifen und zoomen, damit Sie all das tun
können, und damit sehen wir die Karte.
Jetzt ist die Karte verwendbar, aber natürlich können wir dort noch keinen Ort auswählen. Das ist
das nächste, was wir ändern müssen.