1 00:00:02,080 --> 00:00:06,910 Für den Benutzerstandort haben wir ein weiteres Paket in expo integriert, das wir einfach verwenden können, 2 00:00:06,910 --> 00:00:08,740 und das ist das Standortpaket. 3 00:00:08,780 --> 00:00:14,230 Nach wie vor installieren Sie es, indem Sie den Anweisungen hier folgen. Dort unten sehen Sie auch 4 00:00:14,230 --> 00:00:15,520 ein Anwendungsbeispiel. Lassen Sie 5 00:00:15,520 --> 00:00:17,130 uns das also schnell tun. 6 00:00:17,140 --> 00:00:24,580 Lassen Sie uns expo install expo-location in unserem Projekt ausführen. Wenn dies installiert ist, können wir jetzt 7 00:00:24,570 --> 00:00:27,580 neben der Image-Picker-Komponente auch eine weitere Komponente 8 00:00:27,580 --> 00:00:33,340 hinzufügen. Ich werde den LocationPicker hinzufügen. js-Datei, weil das eine andere Sache ist, die ich in dieser App 9 00:00:33,340 --> 00:00:38,920 tun möchte, möchte ich in der Lage sein, einen Ort auszuwählen. Dafür werde ich in der Location 10 00:00:38,920 --> 00:00:45,490 Picker-Komponente natürlich React from React importieren, da es sich am Ende um eine reguläre React-Komponente handelt, 11 00:00:45,490 --> 00:00:54,040 und ein paar Dinge aus React Native importieren. Dazu gehört auch die Ansicht, eine Schaltfläche, die es uns ermöglicht Um den 12 00:00:54,040 --> 00:01:00,610 Benutzerstandort abzurufen, etwas Text, um auch einen Standard-Fallback-Text anzuzeigen, während kein Ort ausgewählt wurde, eine Aktivitätsanzeige, 13 00:01:00,610 --> 00:01:06,640 um einen Spinner anzuzeigen, während wir darauf warten, dass der Standort abgerufen wird, und 14 00:01:07,300 --> 00:01:13,840 möglicherweise auch eine Warnung, um eine Warnung anzuzeigen Wenn etwas schief geht und natürlich auch 15 00:01:13,840 --> 00:01:16,840 das Stylesheet, um diese Komponente zu stylen. 16 00:01:16,860 --> 00:01:24,390 Jetzt habe ich hier meine Standortauswahlkomponente, die Requisiten empfängt, und dann werden wir 17 00:01:24,390 --> 00:01:33,390 etwas tun, das Styles-Objekt mit Stylesheet einrichten. Erstellen Sie und exportieren Sie am Ende 18 00:01:33,450 --> 00:01:40,870 die Standortauswahlkomponente hier als Standard. Wie sollte der jsx-Code für diese Komponente aussehen? 19 00:01:40,940 --> 00:01:47,540 Letztendlich liegt das wie immer bei Ihnen, aber ich werde hier sehr einfach anfangen und nur eine 20 00:01:47,540 --> 00:01:48,460 Ansicht mit 21 00:01:49,590 --> 00:01:56,580 einer Schaltfläche darin haben, die es mir ermöglicht, den Benutzerstandort abzurufen, und auch eine andere Ansicht darin, die 22 00:01:56,580 --> 00:02:04,080 zum Beispiel meinen Fallback-Text zeigt, nein Der noch ausgewählte Ort wird später ersetzt, um eine kleine Vorschau des Ortes auf 23 00:02:04,110 --> 00:02:05,890 einer Karte zu erhalten. 24 00:02:05,910 --> 00:02:10,010 Das werde ich später hinzufügen. Jetzt hier auf der Schaltfläche werde 25 00:02:13,220 --> 00:02:20,990 ich daher sagen, Benutzerstandort abrufen, zum Beispiel die Farbe auf Farben setzen. primär und dafür stellen Sie wie immer sicher, dass Sie 26 00:02:20,990 --> 00:02:27,430 diese Farben konstant importieren und beim Drücken dieser Taste, ich möchte nicht überraschend mit dem Abrufen des 27 00:02:27,430 --> 00:02:28,500 Benutzerstandorts beginnen. 28 00:02:28,610 --> 00:02:38,180 Hier füge ich also eine neue Konstante hinzu, den Standort-Handler abrufen. Diese Funktion verwendet dann die soeben installierte Standort-API, um den 29 00:02:38,210 --> 00:02:43,760 Benutzerstandort abzurufen. Dies wird ausgelöst, wenn ich auf diese Schaltfläche klicke. 30 00:02:45,530 --> 00:02:57,040 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 31 00:02:57,190 --> 00:03:03,790 Text auch formatieren, aber ich bleibe bei der Standardeinstellung und füge nun 32 00:03:03,790 --> 00:03:15,570 diese beiden Stile hinzu das Stylesheet, also Standortauswahl hier, dort füge ich einen Rand am unteren Rand von beispielsweise 15 hinzu und in 33 00:03:15,570 --> 00:03:27,820 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 34 00:03:27,820 --> 00:03:33,380 verfügbare Breite, eine Höhe von vielleicht 150 und auch die 35 00:03:33,570 --> 00:03:41,310 Randfarbe dieser gräulichen Farbe mit dem Hex-Code #ccc und einer Randbreite von eins. Es ist 36 00:03:41,540 --> 00:03:47,620 ein bisschen wie im Bildvorschau-Feld. Damit haben wir diese Komponente eingerichtet und können sie 37 00:03:47,620 --> 00:03:50,170 jetzt in den neuen Ortsbildschirm aufnehmen. 38 00:03:50,200 --> 00:04:00,970 In dieser Bildschirmkomponente importiere ich die Standortauswahl aus Komponenten, die Standortauswahl wie diese, und füge sie einfach so 39 00:04:00,970 --> 00:04:05,750 in den jsx-Code unter der Bildauswahl ein. 40 00:04:05,900 --> 00:04:10,540 Wenn wir das jetzt speichern und einen Blick darauf werfen, sehen wir diese Box hier. 41 00:04:10,560 --> 00:04:16,110 Wenn ich jetzt auf Benutzerstandort abrufen klicke, ist es nicht überraschend, dass ich anfange, den Benutzerstandort abzurufen. 42 00:04:18,460 --> 00:04:26,110 Dafür müssen wir in unserer Standortauswahlkomponente einige Dinge hier importieren - wir importieren alles als 43 00:04:26,200 --> 00:04:33,610 Standort aus dem soeben installierten Expo-Standortpaket. Zusätzlich zum Standort müssen wir ebenso 44 00:04:33,610 --> 00:04:40,030 wie für die Kamera nach Berechtigungen fragen, sodass wir alles als Berechtigungen 45 00:04:40,060 --> 00:04:47,970 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 46 00:04:48,090 --> 00:04:54,540 und dafür den Ansatz kopieren, den ich in der Bildauswahl verwende. Dort haben wir diese Funktion zum Überprüfen von Berechtigungen, die wir 47 00:04:54,540 --> 00:04:59,010 natürlich auch auslagern und allgemeiner schreiben können, um in verschiedenen Komponenten zu arbeiten. Hier 48 00:04:59,010 --> 00:05:04,800 kopiere ich sie einfach und überprüfe die Berechtigungen. Natürlich frage ich hier nicht nach der 49 00:05:04,800 --> 00:05:12,750 Kamerarolle, sondern nach einem Standort. Sie müssen Standortberechtigungen erteilen, um diese App verwenden zu können, und jetzt überprüfen, ob die 50 00:05:12,750 --> 00:05:20,820 Berechtigungen hier im Handler zum Abrufen des Standorts ausgeführt werden. Wir können async await hier erneut verwenden, um das Ergebnis 51 00:05:20,850 --> 00:05:28,870 dieser Überprüfung abzuwarten. Daher möchte ich hier die Berechtigung überprüfen. Wenn nicht, wenn wir keine Berechtigungen haben, werde ich 52 00:05:29,020 --> 00:05:33,040 einfach hierher zurückkehren, es gibt keine müssen fortfahren, da 53 00:05:33,040 --> 00:05:39,790 wir den Ort sowieso nicht abrufen dürfen. Ansonsten können wir fortfahren und jetzt können 54 00:05:39,970 --> 00:05:47,680 wir das Standortpaket verwenden, um die aktuelle Position asynchron abzurufen, und dies tut, was der Name impliziert, 55 00:05:47,680 --> 00:05:53,230 es erhält die aktuelle Benutzerposition. Das Auffinden des Benutzers kann nun eine Weile dauern, 56 00:05:53,230 --> 00:05:58,150 weshalb dies eine asynchrone Aufgabe ist und ein Versprechen zurückgibt, ein Versprechen, das aufgelöst wird, sobald wir den 57 00:05:58,180 --> 00:06:04,230 Benutzerstandort erhalten haben, oder das abgelehnt wird, wenn es keinen abruft. Wir können dies auch mit einem Objekt 58 00:06:04,240 --> 00:06:09,400 konfigurieren, das Sie an das Objekt übergeben. Wie immer haben Sie in den offiziellen Dokumenten 59 00:06:09,400 --> 00:06:16,550 alles über alle Optionen erfahren, die Sie dort festlegen können. Eine Option, die Sie festlegen können, ist beispielsweise das Zeitlimit, das 60 00:06:16,550 --> 00:06:22,670 auf fünf Sekunden festgelegt wird, um sicherzustellen, dass wir aufhören, es zu versuchen, und einen Fehler auslösen, wenn das 61 00:06:22,670 --> 00:06:23,870 Versprechen fünf Sekunden 62 00:06:23,870 --> 00:06:27,260 lang nicht abgerufen werden kann, sodass das Versprechen dann abgelehnt wird. 63 00:06:27,310 --> 00:06:34,930 Jetzt können wir darauf warten und es natürlich in einen Try-Catch-Block einwickeln. Dies ist wichtig, um sicherzustellen, dass wir 64 00:06:35,590 --> 00:06:42,610 Fehler behandeln, wenn wir keinen Ort abrufen können. Hier werde ich dann einfach die Alarmkomponente 65 00:06:42,610 --> 00:06:52,410 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 66 00:06:52,840 --> 00:06:59,940 Standort auf der Karte auswählen, der momentan nicht möglich ist, den wir aber ' Ich werde bald 67 00:06:59,940 --> 00:07:07,920 hinzufügen und hier einen Button, wo wir OK sagen. Das ist also eine Warnung, die ich zeige, wenn das Abrufen des Standorts 68 00:07:08,880 --> 00:07:10,090 aus irgendeinem Grund 69 00:07:10,130 --> 00:07:12,470 fehlschlägt. Andernfalls erwarte ich hier einen Standort zurück. 70 00:07:12,500 --> 00:07:15,200 Das ist das Ergebnis dieses Versprechens am Ende, einen 71 00:07:15,200 --> 00:07:16,920 Standort, den wir verwenden können. 72 00:07:17,120 --> 00:07:25,720 Jetzt können wir diesen Speicherort mithilfe des Verwendungsstatus verwenden, um hier einen internen Status zu verwalten. Dies ist der 73 00:07:26,830 --> 00:07:36,250 ausgewählte Standort und der festgelegte Standort. Dort können wir den Verwendungsstatus aufrufen, der hier und dann hier im Standorthandler keinen 74 00:07:36,250 --> 00:07:37,810 Anfangswert hat. 75 00:07:37,810 --> 00:07:45,550 Wir können den ausgewählten Speicherort auf etwas setzen. Wir müssen erst einmal sehen, auf was, auf null, 76 00:07:45,600 --> 00:07:52,230 aber bevor wir hier etwas festlegen, lassen Sie uns den Speicherort des Konsolenprotokolls tatsächlich 77 00:07:52,290 --> 00:07:57,530 festlegen, um ein Gefühl dafür zu bekommen, was sich dort befindet. 78 00:07:57,540 --> 00:08:03,740 Jetzt möchte ich auch einen Spinner zeigen, während wir abrufen, also werde ich hier einen anderen 79 00:08:03,740 --> 00:08:10,190 Status verwalten und das ist der Status "Abrufen" und anfangs ist das natürlich falsch, aber anfangs holen wir 80 00:08:10,220 --> 00:08:12,260 nicht, aber dann hier am 81 00:08:12,650 --> 00:08:19,670 Abrufort Handler, bevor wir anfangen, den Speicherort zu ermitteln, setze ich das Abrufen auf true. Sobald wir fertig sind, 82 00:08:19,670 --> 00:08:21,090 schließt dies auch 83 00:08:21,260 --> 00:08:24,410 ein, wenn wir einen Fehler erhalten haben. Danach setze 84 00:08:24,410 --> 00:08:31,640 ich ihn wieder auf false und jetzt können wir das Abrufen verwenden um einen Spinner zu zeigen, während wir holen. 85 00:08:31,640 --> 00:08:39,740 Wenn also das Abrufen wahr ist, zeige ich den Aktivitätsindikator und nur ansonsten zeige ich diesen Text und 86 00:08:39,950 --> 00:08:45,920 später zeigen wir natürlich nicht nur den Text, sondern auch einen Kartenausschnitt. 87 00:08:45,920 --> 00:08:48,260 Jetzt kann die Aktivitätsanzeige konfiguriert werden. Wir können 88 00:08:48,260 --> 00:08:55,440 die Größe auf groß und die Farbe auf Farben einstellen. primär, wenn du willst. Mit all dem gehen wir zurück 89 00:08:55,440 --> 00:08:57,940 und probieren es hier unter iOS aus, 90 00:08:57,960 --> 00:09:03,060 denn obwohl ich hier kein Bild hinzufügen kann, kann ich zumindest den Speicherort überprüfen und 91 00:09:03,060 --> 00:09:07,980 auf Benutzerstandort abrufen klicken. Jetzt werde ich gefragt, ob ich gewähren möchte Berechtigungen, die 92 00:09:08,040 --> 00:09:14,820 ich zulassen möchte, immer zulassen und Sie sehen diesen Spinner, es ist superschnell, weil es ein Simulator ist, es simuliert 93 00:09:14,820 --> 00:09:19,270 übrigens auch den Standort, es ist nicht der tatsächliche Standort Ihres Computers, auf 94 00:09:19,480 --> 00:09:25,750 dem Sie dies ausführen Es ist ein Standard-Dummy-Speicherort in San Francisco und hier auf Android. Wenn ich hier 95 00:09:25,780 --> 00:09:33,100 auf Benutzerstandort abrufen klicke, muss ich Berechtigungen erteilen. Sobald ich das getan habe, sehen Sie den Spinner hier und dann sehen Sie 96 00:09:33,100 --> 00:09:39,700 nichts als in den Protokollen Natürlich siehst du etwas. Dort sehen Sie die Objekte, die protokolliert 97 00:09:39,700 --> 00:09:45,670 wurden, wo Sie ein Unterobjekt für Koordinaten haben, sozusagen ein Feld mit dem Namen Koordinaten, 98 00:09:45,670 --> 00:09:53,230 und das Objekt, das ein anderes Objekt mit der Genauigkeit und dann ein Längen- und Breitengradpaar ist, das diesen 99 00:09:53,290 --> 00:10:00,170 gefälschten Ort beschreibt. Beide Simulatoren verwenden Fälschungen Standorte. Sie haben auch einen Zeitstempel. 100 00:10:00,210 --> 00:10:01,700 Jetzt wissen wir also, 101 00:10:01,740 --> 00:10:08,790 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 102 00:10:09,540 --> 00:10:17,330 dem Sie einen Breitengrad des Standorts speichern. Koordinaten. Breitengrad, das ist es, was da drin ist, richtig und ein Längengrad. lng des 103 00:10:17,330 --> 00:10:20,280 Ortes. Koordinaten. Längengrad. 104 00:10:20,320 --> 00:10:26,140 Jetzt haben wir diesen ausgewählten Ort zur Verfügung und dieser ausgewählte Ort kann jetzt verwendet werden, 105 00:10:26,440 --> 00:10:28,440 um beispielsweise hier einen 106 00:10:28,480 --> 00:10:34,420 kleinen Kartenausschnitt anzuzeigen, sobald wir einen Ort haben. Bevor ich das nur eine winzige Sache mache, möchte 107 00:10:34,720 --> 00:10:41,920 ich sicherstellen, dass sowohl der Text als auch der Drehfeld hier zentriert sind. In der Kartenvorschau werde ich also auch den Rechtfertigungsinhalt auf 108 00:10:42,280 --> 00:10:48,490 Zentrieren setzen und Elemente auf Zentrieren ausrichten, damit alle Der Inhalt dort ist horizontal und vertikal zentriert, das ist nur 109 00:10:48,500 --> 00:10:50,310 eine winzige Sache. Jetzt sehen 110 00:10:50,320 --> 00:10:52,290 Sie das alles in der Mitte. 111 00:10:52,300 --> 00:10:58,390 Aber stellen wir jetzt sicher, dass wir einen kleinen Kartenausschnitt zeigen, der den Ort zeigt, den der Benutzer ausgewählt hat.