1 00:00:02,100 --> 00:00:09,600 Um dies auf einer Karte anzuzeigen, haben wir diese Kartenbildschirmkomponente, die derzeit nur einige Dummy-Inhalte enthält, und jetzt müssen wir in 2 00:00:09,600 --> 00:00:15,800 der Lage sein, eine interaktive Karte zu rendern, und dafür hat uns die Expo wieder behandelt. 3 00:00:15,870 --> 00:00:17,880 Dort finden Sie 4 00:00:18,970 --> 00:00:20,810 das Kartenansichtspaket. 5 00:00:20,850 --> 00:00:25,840 Jetzt hinter den Kulissen wird ein Paket namens React Native Maps verwendet, das Sie auch in 6 00:00:25,840 --> 00:00:30,220 Nicht-Expo-Apps verwenden können. Übrigens können viele dieser Pakete in Nicht-Expo-Apps verwendet werden, und darauf 7 00:00:30,220 --> 00:00:33,950 werde ich in den Building-Apps zurückkommen Ohne Expo-Modul, aber im Moment können 8 00:00:34,060 --> 00:00:38,480 wir dies einfach bequem installieren, indem wir diesen Befehl ausführen. Dadurch wird das React Native 9 00:00:38,500 --> 00:00:40,630 Maps-Paket installiert und wir können es 10 00:00:40,640 --> 00:00:43,820 so verwenden, wie wir es hier in diesem Beispiel sehen. 11 00:00:43,900 --> 00:00:49,660 Übrigens finden Sie auch in der offiziellen Dokumentation unter diesem Link weitere Verwendungsbeispiele, da Sie dort 12 00:00:49,660 --> 00:00:52,660 alles über die Verwendung dieses Pakets erfahren können. 13 00:00:52,660 --> 00:00:56,300 Einige Beispiele werden hier natürlich auch in diesem Modul gezeigt. 14 00:00:56,410 --> 00:01:01,810 Lassen Sie uns also expo install react-native-maps ausführen, um dieses Paket hier zu installieren. Auf 15 00:01:01,810 --> 00:01:06,160 diese Weise können wir verschiedene Komponenten verwenden, die interaktive Karten rendern. 16 00:01:06,160 --> 00:01:12,860 Warten wir also, bis dies abgeschlossen ist, und wenn dies abgeschlossen ist, können wir in der Kartenbildschirmkomponente mit der Verwendung dieser Karte 17 00:01:12,860 --> 00:01:13,300 beginnen. 18 00:01:15,730 --> 00:01:26,160 Um die Karte zu verwenden, können wir jetzt die Kartenansicht aus der React Native-Karte importieren. Aus diesem Paket haben wir sie gerade 19 00:01:26,160 --> 00:01:31,150 installiert und können so eine Karte auf dem Bildschirm rendern. 20 00:01:31,200 --> 00:01:32,730 Wie funktioniert das nun? 21 00:01:32,730 --> 00:01:38,880 Lassen Sie uns hier in unseren Kartenbildschirm gehen und anstatt diese Ansicht hier zurückzugeben, werde ich 22 00:01:39,630 --> 00:01:41,340 eine solche Kartenansicht zurückgeben. 23 00:01:41,370 --> 00:01:43,470 Jetzt kann die Kartenansicht vorerst ein selbstschließendes Tag 24 00:01:43,470 --> 00:01:47,910 sein. Wir können später auch einige Markierungen hinzufügen, aber jetzt rendern wir sie einfach so und jetzt 25 00:01:48,180 --> 00:01:51,530 müssen Sie diese Kartenansicht konfigurieren. Um genau zu 26 00:01:51,540 --> 00:01:58,310 sein, benötigt es eine Region, die angibt, wo es sich beim Laden konzentrieren soll, also auf 27 00:01:58,440 --> 00:02:03,990 welchen Kartenteil oder welchen Teil der Welt es sich beim Laden konzentrieren soll. 28 00:02:03,990 --> 00:02:12,770 Also müssen wir hier eine solche Region erstellen und ich werde das in einer konstanten benannten Kartenregion 29 00:02:12,770 --> 00:02:20,810 speichern und eine Region ist tatsächlich ein Objekt mit vier Eigenschaften und Sie müssen sie 30 00:02:20,840 --> 00:02:24,470 so benennen - Breitengrad und nicht 31 00:02:27,360 --> 00:02:32,680 Breitengrad, sondern wirklich ausgeschriebener Breitengrad, Längengrad, BreitengradDelta und LängengradDelta. 32 00:02:32,830 --> 00:02:41,430 Die Deltas legen im Grunde den Zoomfaktor fest, da dies beschreibt, wie viel Platz Sie um die Mitte sehen 33 00:02:41,490 --> 00:02:45,450 können, die Sie mit diesen beiden Punkten beschreiben. 34 00:02:45,480 --> 00:02:48,690 Das beschreibt also einen Punkt, zusammen mit 35 00:02:48,690 --> 00:02:51,030 den beiden Deltas, eine Oberfläche. 36 00:02:51,080 --> 00:02:54,890 Jetzt können wir hier mit einigen Dummy-Werten beginnen, bevor 37 00:02:54,890 --> 00:02:58,820 wir später auch sicherstellen, dass wir diese vorab ausfüllen können. 38 00:02:58,820 --> 00:03:03,980 Hier setze ich dies auf den Dummy-Wert 37. 78 und -122. 43, die 39 00:03:03,980 --> 00:03:11,900 sich in der Bay Area um das Google-Hauptquartier befindet, und hier nimmt 40 00:03:11,900 --> 00:03:18,080 latitudeDelta 0 an. 0922 und dann 0. 0421 fand ich, dass 41 00:03:18,080 --> 00:03:21,030 dies als Region recht gut funktioniert. 42 00:03:21,080 --> 00:03:27,120 Natürlich können Sie mit diesen Zahlen experimentieren, aber am Ende geben Sie diese Kartenregion hier ein. 43 00:03:27,200 --> 00:03:30,020 Nun sollte dies eine Karte auf dem Bildschirm rendern, jetzt müssen 44 00:03:30,110 --> 00:03:32,320 wir sie nur noch erreichen können und 45 00:03:32,330 --> 00:03:37,000 dafür gehe ich zurück zur Standortauswahl und möchte sie auf zwei verschiedene Arten erreichen - eine ist 46 00:03:37,010 --> 00:03:42,380 mit Hilfe einer Schaltfläche was ich noch nicht hinzugefügt habe. Neben der Schaltfläche zum Abrufen des Benutzerstandorts möchte 47 00:03:42,390 --> 00:03:48,730 ich eine zweite Schaltfläche haben, die neben der ersten Schaltfläche angezeigt wird. Daher füge ich eine Ansicht hinzu, 48 00:03:48,730 --> 00:03:53,830 um beide zu verpacken, und verschiebe diese Schaltfläche hier hinein und habe dort eine zweite 49 00:03:53,830 --> 00:04:01,400 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 50 00:04:01,400 --> 00:04:09,740 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 51 00:04:09,740 --> 00:04:10,870 Dies hier 52 00:04:10,940 --> 00:04:16,220 und das ist eine Möglichkeit, dies auszuwählen. Die andere Möglichkeit, dies auszuwählen oder zur 53 00:04:16,220 --> 00:04:22,900 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. 54 00:04:22,900 --> 00:04:30,460 Ich werde ihm eine Stilkennung für Aktionen geben und dann dort unten können Aktionen auf relativ einfache Weise 55 00:04:30,460 --> 00:04:31,620 konfiguriert werden. 56 00:04:32,930 --> 00:04:38,720 Ich möchte, dass das Element nebeneinander sitzt, damit die Biegerichtung eine Zeile und keine Spalte ist. Ausrichten von Inhalten kann Platz 57 00:04:38,720 --> 00:04:45,580 sein, um den verfügbaren freien Platz um beide Schaltflächen zu verteilen. Ich nehme für diese 58 00:04:45,620 --> 00:04:49,400 Zeile eine Breite von 100% und das wars. 59 00:04:49,400 --> 00:04:51,170 Damit habe ich meine Schaltflächen 60 00:04:51,170 --> 00:04:56,510 hier. Jetzt müssen wir sicherstellen, dass wir auch auf die Kartenvorschau tippen können. Lassen Sie mich dazu 61 00:04:56,510 --> 00:05:03,090 zur Kartenvorschau gehen und diese tatsächlich nicht in eine Ansicht, sondern in eine berührbare Komponente und hier einbinden Ich verwende nur 62 00:05:03,110 --> 00:05:07,700 berührbare Deckkraft. Natürlich können Sie auch andere berührbare Komponenten verwenden, die auf der Plattform basieren, 63 00:05:07,700 --> 00:05:08,260 auf 64 00:05:08,270 --> 00:05:14,000 der Sie ausgeführt werden. Ich möchte dies relativ einfach halten, daher werde ich diese Ansicht hier einfach durch berührbare 65 00:05:14,450 --> 00:05:15,430 Deckkraft ersetzen. Habe 66 00:05:15,440 --> 00:05:20,750 meinen Stil hier, das ist in Ordnung, aber natürlich auch den onPress-Handler und dort möchte ich eine 67 00:05:20,750 --> 00:05:23,950 Funktion auslösen, die ich von außen über Requisiten erhalten möchte. 68 00:05:24,020 --> 00:05:28,210 Ich werde das auch nur onPress nennen, aber Sie können dieser Requisite einen beliebigen Namen geben. 69 00:05:28,250 --> 00:05:32,030 Auf diese Weise können wir jetzt eine onPress-Requisite in die 70 00:05:32,030 --> 00:05:38,030 Kartenvorschau einfügen, sodass ich hier in der Standortauswahl onPress in der Kartenvorschau anhören kann und dort natürlich dieselbe 71 00:05:38,030 --> 00:05:42,050 Funktion auslösen möchte, wie wenn ich auf die Schaltfläche unten klicke Dort. 72 00:05:42,140 --> 00:05:44,420 Ich möchte den Pick-on-Map-Handler auslösen, also 73 00:05:44,660 --> 00:05:46,490 mache ich das so. 74 00:05:46,520 --> 00:05:49,790 Jetzt sollte der Pick-on-Kartenhandler einfach zum Kartenbildschirm rechts gehen, 75 00:05:49,790 --> 00:05:56,700 damit wir dort Requisiten sagen können. Navigation. Karte navigieren und das wars für die Sekunde. 76 00:05:56,720 --> 00:06:01,760 Wenn wir dies jetzt speichern, sollten wir in der Lage sein, diese interaktive Vollbildkarte zu erreichen, auf der wir noch 77 00:06:01,760 --> 00:06:04,140 keinen Ort auswählen können, aber zumindest anzeigen können. 78 00:06:04,160 --> 00:06:09,500 Wenn ich jetzt hier auf das Plus klicke und dann die Karte auswähle, wird eine Fehlermeldung 79 00:06:09,600 --> 00:06:15,930 angezeigt. Warum ist das so? Nun, das hat nichts mit nativen Modulen zu tun. Sie werden sich vielleicht daran erinnern, dass 80 00:06:15,930 --> 00:06:20,700 die Navigationsstütze nur für Komponenten verfügbar ist, die direkt als Bildschirme geladen werden, was der Standortwähler natürlich 81 00:06:20,700 --> 00:06:22,140 nicht ist. Jetzt 82 00:06:22,140 --> 00:06:23,750 gibt es verschiedene Problemumgehungen. Es 83 00:06:23,760 --> 00:06:26,070 gibt eine Komponente höherer Ordnung, die wir 84 00:06:26,080 --> 00:06:29,910 verwenden können. Wir können auch ein reaktionsnavigationsspezifisches Hook-Paket installieren. Hier gehe ich 85 00:06:30,360 --> 00:06:35,430 jedoch einfach vor und stelle sicher, dass ich eine Navigationsstütze für die Standortauswahl von habe Wenn 86 00:06:35,760 --> 00:06:39,720 ich zum neuen Ortsbildschirm gehe, auf dem ich die Standortauswahl verwende, stelle 87 00:06:39,960 --> 00:06:45,600 ich diese Navigationsstütze ein und leite die Requisiten weiter. Navigation, die ich hier zur Verfügung habe, da 88 00:06:45,600 --> 00:06:49,170 dies eine Komponente ist, die direkt über einen Navigator geladen wird. Jetzt 89 00:06:49,170 --> 00:06:54,960 leite ich nur den Zugriff auf meine Navigations-Requisiten weiter. Und damit, wenn wir jetzt zurückgehen und darauf 90 00:06:55,680 --> 00:07:00,300 klicken, laden wir diese Karte hier oder zumindest einen Kartenbildschirm, aber wo 91 00:07:00,320 --> 00:07:01,740 ist die Karte? 92 00:07:01,820 --> 00:07:09,290 Nun, die Karte ist unsichtbar, denn und das ist wichtig, für Ihre Karte müssen Sie einen Stil hinzufügen, 93 00:07:09,290 --> 00:07:15,130 und hier werde ich Stile hinzufügen. map und es kann ein sehr einfacher Stil sein, aber Sie 94 00:07:15,140 --> 00:07:18,520 müssen nur definieren, wie groß es sein soll, da es standardmäßig keinen Platz einnimmt. 95 00:07:18,560 --> 00:07:24,410 Wenn Sie hier also einfach flex auf eins setzen und ihm mitteilen, dass er den gesamten verfügbaren Platz beanspruchen soll, 96 00:07:24,410 --> 00:07:26,840 stellen Sie sicher, dass Sie eine Karte sehen. 97 00:07:26,840 --> 00:07:35,360 Wenn Sie also darauf klicken, wird unsere Karte geladen. Erwähnenswert ist auch, dass Sie unter iOS automatisch Apple Maps verwenden. 98 00:07:35,450 --> 00:07:40,490 Wenn Sie möchten, können Sie dort auch Google Maps verwenden. In den offiziellen Dokumenten 99 00:07:40,490 --> 00:07:44,680 erfahren Sie, wie Sie unter Android immer Google Maps verwenden. 100 00:07:44,690 --> 00:07:46,820 Wenn ich hier auf Karte auswählen klicke, werden 101 00:07:46,910 --> 00:07:53,430 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, 102 00:07:53,430 --> 00:07:55,290 indem wir hier auf unsere 103 00:07:55,350 --> 00:07:56,580 Vorschau klicken. Das 104 00:07:56,580 --> 00:08:00,500 haben wir richtig eingerichtet, damit es auch funktioniert, natürlich auch unter iOS. 105 00:08:00,540 --> 00:08:05,940 Übrigens ist die Animation hier nicht besonders flüssig, auf einem realen Gerät wird es so sein, also ist 106 00:08:05,940 --> 00:08:09,300 das kein Problem, das ist nur hier auf dem Emulator. 107 00:08:09,300 --> 00:08:14,040 Damit haben wir unsere Karte hier und auf dieser Karte können wir scrollen. Auch hier ist es auf dem Simulator 108 00:08:14,040 --> 00:08:16,620 möglicherweise etwas klein, auf einem realen Gerät jedoch nicht. 109 00:08:16,620 --> 00:08:21,090 Hier können Sie also scrollen, Sie können später auch kneifen und zoomen, damit Sie all das tun 110 00:08:21,090 --> 00:08:23,150 können, und damit sehen wir die Karte. 111 00:08:23,220 --> 00:08:27,570 Jetzt ist die Karte verwendbar, aber natürlich können wir dort noch keinen Ort auswählen. Das ist 112 00:08:27,600 --> 00:08:29,430 das nächste, was wir ändern müssen.