Für den Benutzerstandort haben wir ein weiteres Paket in expo integriert, das wir einfach verwenden können,
und das ist das Standortpaket.
Nach wie vor installieren Sie es, indem Sie den Anweisungen hier folgen. Dort unten sehen Sie auch
ein Anwendungsbeispiel. Lassen Sie
uns das also schnell tun.
Lassen Sie uns expo install expo-location in unserem Projekt ausführen. Wenn dies installiert ist, können wir jetzt
neben der Image-Picker-Komponente auch eine weitere Komponente
hinzufügen. Ich werde den LocationPicker hinzufügen. js-Datei, weil das eine andere Sache ist, die ich in dieser App
tun möchte, möchte ich in der Lage sein, einen Ort auszuwählen. Dafür werde ich in der Location
Picker-Komponente natürlich React from React importieren, da es sich am Ende um eine reguläre React-Komponente handelt,
und ein paar Dinge aus React Native importieren. Dazu gehört auch die Ansicht, eine Schaltfläche, die es uns ermöglicht Um den
Benutzerstandort abzurufen, etwas Text, um auch einen Standard-Fallback-Text anzuzeigen, während kein Ort ausgewählt wurde, eine Aktivitätsanzeige,
um einen Spinner anzuzeigen, während wir darauf warten, dass der Standort abgerufen wird, und
möglicherweise auch eine Warnung, um eine Warnung anzuzeigen Wenn etwas schief geht und natürlich auch
das Stylesheet, um diese Komponente zu stylen.
Jetzt habe ich hier meine Standortauswahlkomponente, die Requisiten empfängt, und dann werden wir
etwas tun, das Styles-Objekt mit Stylesheet einrichten. Erstellen Sie und exportieren Sie am Ende
die Standortauswahlkomponente hier als Standard. Wie sollte der jsx-Code für diese Komponente aussehen?
Letztendlich liegt das wie immer bei Ihnen, aber ich werde hier sehr einfach anfangen und nur eine
Ansicht mit
einer Schaltfläche darin haben, die es mir ermöglicht, den Benutzerstandort abzurufen, und auch eine andere Ansicht darin, die
zum Beispiel meinen Fallback-Text zeigt, nein Der noch ausgewählte Ort wird später ersetzt, um eine kleine Vorschau des Ortes auf
einer Karte zu erhalten.
Das werde ich später hinzufügen. Jetzt hier auf der Schaltfläche werde
ich daher sagen, Benutzerstandort abrufen, zum Beispiel die Farbe auf Farben setzen. primär und dafür stellen Sie wie immer sicher, dass Sie
diese Farben konstant importieren und beim Drücken dieser Taste, ich möchte nicht überraschend mit dem Abrufen des
Benutzerstandorts beginnen.
Hier füge ich also eine neue Konstante hinzu, den Standort-Handler abrufen. Diese Funktion verwendet dann die soeben installierte Standort-API, um den
Benutzerstandort abzurufen. Dies wird ausgelöst, wenn ich auf diese Schaltfläche klicke.
Für das Styling hier füge ich eine Stilortauswahl hinzu. In dieser Ansicht hier füge ich eine weitere Stilkartenvorschau hinzu. Wir könnten diesen
Text auch formatieren, aber ich bleibe bei der Standardeinstellung und füge nun
diese beiden Stile hinzu das Stylesheet, also Standortauswahl hier, dort füge ich einen Rand am unteren Rand von beispielsweise 15 hinzu und in
der Kartenvorschau füge ich dort auch einen Rand am unteren Rand von beispielsweise 10 und die Breite von 100% hinzu Nehmen Sie die gesamte
verfügbare Breite, eine Höhe von vielleicht 150 und auch die
Randfarbe dieser gräulichen Farbe mit dem Hex-Code #ccc und einer Randbreite von eins. Es ist
ein bisschen wie im Bildvorschau-Feld. Damit haben wir diese Komponente eingerichtet und können sie
jetzt in den neuen Ortsbildschirm aufnehmen.
In dieser Bildschirmkomponente importiere ich die Standortauswahl aus Komponenten, die Standortauswahl wie diese, und füge sie einfach so
in den jsx-Code unter der Bildauswahl ein.
Wenn wir das jetzt speichern und einen Blick darauf werfen, sehen wir diese Box hier.
Wenn ich jetzt auf Benutzerstandort abrufen klicke, ist es nicht überraschend, dass ich anfange, den Benutzerstandort abzurufen.
Dafür müssen wir in unserer Standortauswahlkomponente einige Dinge hier importieren - wir importieren alles als
Standort aus dem soeben installierten Expo-Standortpaket. Zusätzlich zum Standort müssen wir ebenso
wie für die Kamera nach Berechtigungen fragen, sodass wir alles als Berechtigungen
aus Ausstellungsberechtigungen importieren, was ebenfalls erforderlich ist. Nachdem dies hier im Get Location Handler hinzugefügt wurde, möchte ich zunächst meine Berechtigungen überprüfen
und dafür den Ansatz kopieren, den ich in der Bildauswahl verwende. Dort haben wir diese Funktion zum Überprüfen von Berechtigungen, die wir
natürlich auch auslagern und allgemeiner schreiben können, um in verschiedenen Komponenten zu arbeiten. Hier
kopiere ich sie einfach und überprüfe die Berechtigungen. Natürlich frage ich hier nicht nach der
Kamerarolle, sondern nach einem Standort. Sie müssen Standortberechtigungen erteilen, um diese App verwenden zu können, und jetzt überprüfen, ob die
Berechtigungen hier im Handler zum Abrufen des Standorts ausgeführt werden. Wir können async await hier erneut verwenden, um das Ergebnis
dieser Überprüfung abzuwarten. Daher möchte ich hier die Berechtigung überprüfen. Wenn nicht, wenn wir keine Berechtigungen haben, werde ich
einfach hierher zurückkehren, es gibt keine müssen fortfahren, da
wir den Ort sowieso nicht abrufen dürfen. Ansonsten können wir fortfahren und jetzt können
wir das Standortpaket verwenden, um die aktuelle Position asynchron abzurufen, und dies tut, was der Name impliziert,
es erhält die aktuelle Benutzerposition. Das Auffinden des Benutzers kann nun eine Weile dauern,
weshalb dies eine asynchrone Aufgabe ist und ein Versprechen zurückgibt, ein Versprechen, das aufgelöst wird, sobald wir den
Benutzerstandort erhalten haben, oder das abgelehnt wird, wenn es keinen abruft. Wir können dies auch mit einem Objekt
konfigurieren, das Sie an das Objekt übergeben. Wie immer haben Sie in den offiziellen Dokumenten
alles über alle Optionen erfahren, die Sie dort festlegen können. Eine Option, die Sie festlegen können, ist beispielsweise das Zeitlimit, das
auf fünf Sekunden festgelegt wird, um sicherzustellen, dass wir aufhören, es zu versuchen, und einen Fehler auslösen, wenn das
Versprechen fünf Sekunden
lang nicht abgerufen werden kann, sodass das Versprechen dann abgelehnt wird.
Jetzt können wir darauf warten und es natürlich in einen Try-Catch-Block einwickeln. Dies ist wichtig, um sicherzustellen, dass wir
Fehler behandeln, wenn wir keinen Ort abrufen können. Hier werde ich dann einfach die Alarmkomponente
verwenden, die ich bereits importiere, um einen Alarm auszulösen, konnte den Standort nicht abrufen und dann hier bitte später erneut versuchen oder einen
Standort auf der Karte auswählen, der momentan nicht möglich ist, den wir aber ' Ich werde bald
hinzufügen und hier einen Button, wo wir OK sagen. Das ist also eine Warnung, die ich zeige, wenn das Abrufen des Standorts
aus irgendeinem Grund
fehlschlägt. Andernfalls erwarte ich hier einen Standort zurück.
Das ist das Ergebnis dieses Versprechens am Ende, einen
Standort, den wir verwenden können.
Jetzt können wir diesen Speicherort mithilfe des Verwendungsstatus verwenden, um hier einen internen Status zu verwalten. Dies ist der
ausgewählte Standort und der festgelegte Standort. Dort können wir den Verwendungsstatus aufrufen, der hier und dann hier im Standorthandler keinen
Anfangswert hat.
Wir können den ausgewählten Speicherort auf etwas setzen. Wir müssen erst einmal sehen, auf was, auf null,
aber bevor wir hier etwas festlegen, lassen Sie uns den Speicherort des Konsolenprotokolls tatsächlich
festlegen, um ein Gefühl dafür zu bekommen, was sich dort befindet.
Jetzt möchte ich auch einen Spinner zeigen, während wir abrufen, also werde ich hier einen anderen
Status verwalten und das ist der Status "Abrufen" und anfangs ist das natürlich falsch, aber anfangs holen wir
nicht, aber dann hier am
Abrufort Handler, bevor wir anfangen, den Speicherort zu ermitteln, setze ich das Abrufen auf true. Sobald wir fertig sind,
schließt dies auch
ein, wenn wir einen Fehler erhalten haben. Danach setze
ich ihn wieder auf false und jetzt können wir das Abrufen verwenden um einen Spinner zu zeigen, während wir holen.
Wenn also das Abrufen wahr ist, zeige ich den Aktivitätsindikator und nur ansonsten zeige ich diesen Text und
später zeigen wir natürlich nicht nur den Text, sondern auch einen Kartenausschnitt.
Jetzt kann die Aktivitätsanzeige konfiguriert werden. Wir können
die Größe auf groß und die Farbe auf Farben einstellen. primär, wenn du willst. Mit all dem gehen wir zurück
und probieren es hier unter iOS aus,
denn obwohl ich hier kein Bild hinzufügen kann, kann ich zumindest den Speicherort überprüfen und
auf Benutzerstandort abrufen klicken. Jetzt werde ich gefragt, ob ich gewähren möchte Berechtigungen, die
ich zulassen möchte, immer zulassen und Sie sehen diesen Spinner, es ist superschnell, weil es ein Simulator ist, es simuliert
übrigens auch den Standort, es ist nicht der tatsächliche Standort Ihres Computers, auf
dem Sie dies ausführen Es ist ein Standard-Dummy-Speicherort in San Francisco und hier auf Android. Wenn ich hier
auf Benutzerstandort abrufen klicke, muss ich Berechtigungen erteilen. Sobald ich das getan habe, sehen Sie den Spinner hier und dann sehen Sie
nichts als in den Protokollen Natürlich siehst du etwas. Dort sehen Sie die Objekte, die protokolliert
wurden, wo Sie ein Unterobjekt für Koordinaten haben, sozusagen ein Feld mit dem Namen Koordinaten,
und das Objekt, das ein anderes Objekt mit der Genauigkeit und dann ein Längen- und Breitengradpaar ist, das diesen
gefälschten Ort beschreibt. Beide Simulatoren verwenden Fälschungen Standorte. Sie haben auch einen Zeitstempel.
Jetzt wissen wir also,
was sich dort befindet, damit wir den ausgewählten Ort festlegen können. Jetzt können wir dies so einstellen, dass wir beispielsweise ein Objekt angeben, in
dem Sie einen Breitengrad des Standorts speichern. Koordinaten. Breitengrad, das ist es, was da drin ist, richtig und ein Längengrad. lng des
Ortes. Koordinaten. Längengrad.
Jetzt haben wir diesen ausgewählten Ort zur Verfügung und dieser ausgewählte Ort kann jetzt verwendet werden,
um beispielsweise hier einen
kleinen Kartenausschnitt anzuzeigen, sobald wir einen Ort haben. Bevor ich das nur eine winzige Sache mache, möchte
ich sicherstellen, dass sowohl der Text als auch der Drehfeld hier zentriert sind. In der Kartenvorschau werde ich also auch den Rechtfertigungsinhalt auf
Zentrieren setzen und Elemente auf Zentrieren ausrichten, damit alle Der Inhalt dort ist horizontal und vertikal zentriert, das ist nur
eine winzige Sache. Jetzt sehen
Sie das alles in der Mitte.
Aber stellen wir jetzt sicher, dass wir einen kleinen Kartenausschnitt zeigen, der den Ort zeigt, den der Benutzer ausgewählt hat.