1 00:00:02,340 --> 00:00:08,370 Jetzt, da wir diese Grundlagen aus dem Weg räumen und bevor wir tiefer in React Native 2 00:00:08,370 --> 00:00:13,920 eintauchen und auch, wie wir unsere Apps ein bisschen schöner gestalten können, hat unser Styling 3 00:00:13,950 --> 00:00:18,260 hier definitiv noch ein gewisses Aufwärtspotential, um es auszudrücken Bevor wir 4 00:00:18,420 --> 00:00:23,790 das alles tauchen, möchte ich Ihnen eine weitere aufregende Komponente zeigen, die in React 5 00:00:23,790 --> 00:00:29,970 Native integriert ist und die zeigt, wie einfach Sie React Native-Apps coole Funktionen hinzufügen können, und das 6 00:00:30,150 --> 00:00:32,010 ist die modale Komponente. 7 00:00:32,010 --> 00:00:38,310 Sie finden es natürlich in den offiziellen Dokumenten in diesem Handbuch zu Komponenten und 8 00:00:38,310 --> 00:00:42,650 APIs. Hier und da finden Sie ein Modal. 9 00:00:43,420 --> 00:00:50,470 Jetzt ist es unter anderen und hier ist dieses Modal eine nette Komponente, mit der Sie mit 10 00:00:50,740 --> 00:00:55,780 ein wenig Aufwand eine so schöne Überlagerung, eine Vollbild-Überlagerung, hinzufügen können. 11 00:00:55,900 --> 00:01:00,490 Fügen wir nun ein Modal hinzu, um unsere Zieleingabe tatsächlich zu hosten. Im Moment 12 00:01:00,490 --> 00:01:04,020 befindet sich die Zieleingabe hier oben und das ist in 13 00:01:04,540 --> 00:01:10,480 Ordnung, aber ich möchte das tatsächlich in ein Modal verschieben, damit wir es am Ende auf einem Vollbild-Overlay 14 00:01:10,660 --> 00:01:12,790 haben Wir haben hier oben 15 00:01:12,790 --> 00:01:16,480 nur einen Knopf, also anstelle der Zieleingabe, die dieses Modal öffnet. 16 00:01:16,630 --> 00:01:19,000 Gehen wir also zur Zieleingabe und 17 00:01:19,000 --> 00:01:19,780 dort 18 00:01:19,810 --> 00:01:25,000 möchte ich dies in ein Modal einwickeln. Also werde ich Modal aus 19 00:01:25,000 --> 00:01:27,600 React Native importieren, da es sich 20 00:01:27,640 --> 00:01:34,020 um eine Komponente handelt, die mit React Native ausgeliefert wird, und dort möchte 21 00:01:34,040 --> 00:01:38,080 ich dieses Modal um meine Ansicht hier verwenden ein 22 00:01:38,180 --> 00:01:41,150 bisschen ja, unser Styling ist aus, 23 00:01:41,180 --> 00:01:42,740 wir verlieren 24 00:01:42,740 --> 00:01:46,700 die Polsterung, die wir ursprünglich eingerichtet haben, oder? 25 00:01:46,710 --> 00:01:52,370 In App. js, wir haben diese allgemeine Auffüllung in unserer 26 00:01:52,370 --> 00:01:58,430 Bildschirmansicht, die diese äußere Ansicht ist. Sie wird sicherlich nicht mehr auf die beiden Plattformen angewendet, auf die 27 00:01:58,430 --> 00:02:03,800 beiden Geräte, da unser Inhalt weit außerhalb dieses Bildschirms liegt, sodass Modal bereits etwas tut und 28 00:02:03,800 --> 00:02:08,480 Natürlich sehen wir nicht so viel. Jetzt für modal, also für diese modale 29 00:02:09,020 --> 00:02:14,030 Komponente, können Sie einen sichtbaren Schlüssel festlegen, der definiert, ob dies derzeit sichtbar ist oder 30 00:02:14,030 --> 00:02:19,730 nicht, und der einen Booleschen Wert annimmt, wenn wir dies beispielsweise auf false setzen und danach, wenn 31 00:02:19,730 --> 00:02:21,020 wir uns unsere 32 00:02:21,080 --> 00:02:25,880 Anwendungen ansehen, wir natürlich leerer Bildschirm gesehen. Übrigens, falls Android nach dem Setzen von 33 00:02:25,900 --> 00:02:32,660 false nicht für Sie aktualisieren sollte, schließen Sie die App hier einfach mit Hilfe der App-Schublade und drücken Sie anschließend in Ihrem 34 00:02:32,660 --> 00:02:37,080 Prozess dort unten, dem npm-Startprozess, erneut a, um dies neu zu starten auf Android. 35 00:02:37,100 --> 00:02:39,650 Jetzt haben wir einen leeren Bildschirm, wenn dies auf false gesetzt 36 00:02:39,650 --> 00:02:42,410 ist. Jetzt haben wir offensichtlich eine Hardcodierung, dies ist nicht die Lösung. 37 00:02:42,410 --> 00:02:47,990 Stattdessen in App. js, ich möchte jetzt eine Schaltfläche haben, mit der wir dieses Modal öffnen können, und dann 38 00:02:47,990 --> 00:02:49,340 schließen wir das Modal aus dem 39 00:02:49,350 --> 00:02:55,760 Inneren des Modals heraus, wenn wir dort die Schaltfläche zum Hinzufügen drücken. Jetzt importieren wir hier bereits die Schaltfläche in die App. js und jetzt, wo ich 40 00:02:55,760 --> 00:03:00,530 das sehe, können wir natürlich auch diese Importe loswerden, die wir hier momentan 41 00:03:00,560 --> 00:03:01,480 nicht verwenden. 42 00:03:01,550 --> 00:03:06,400 Lassen Sie also einfach den Button-Import hier zusammen mit den anderen Importen, die wir 43 00:03:06,490 --> 00:03:12,260 verwenden, und jetzt ganz oben können wir die Schaltfläche hinzufügen, das ist jedoch ein selbstschließendes Tag, und 44 00:03:12,260 --> 00:03:22,160 den Titel festlegen, um möglicherweise ein neues Ziel hinzuzufügen, so etwas in der Art. Wenn wir das tun, sollten wir diesen Knopf natürlich hier oben sehen und hier 45 00:03:22,160 --> 00:03:22,750 ist 46 00:03:22,750 --> 00:03:24,040 er und jetzt, wenn 47 00:03:24,140 --> 00:03:31,000 wir diesen Knopf drücken, wollen wir diesen Modal zeigen, richtig? Jetzt müssen wir mehr Staat 48 00:03:31,000 --> 00:03:31,920 verwalten. 49 00:03:31,990 --> 00:03:38,350 Neben der Verwaltung der Kursziele werde ich jetzt auch festlegen, ob wir uns derzeit 50 00:03:38,410 --> 00:03:41,220 im Kursadditionsmodus befinden oder nicht. 51 00:03:41,260 --> 00:03:48,220 Wir sind also anfangs nicht so, dass der Anfangszustand, den ich einstelle, falsch ist, und ich werde meinen 52 00:03:48,220 --> 00:03:50,100 Zustand hier benennen, und 53 00:03:50,140 --> 00:03:55,460 das liegt natürlich ganz bei Ihnen. Ich werde ihn AddMode und SetIsAddMode nennen. 54 00:03:55,660 --> 00:03:56,860 Auch diese Namen liegen 55 00:03:56,860 --> 00:04:03,220 bei Ihnen. Ich habe hier nur eine Konvention, die Sie auch in den offiziellen React-Dokumenten finden. Hier versuchen wir, dem Staat, den 56 00:04:03,220 --> 00:04:08,110 wir kontrollieren, einen passenden Namen zu geben. Dann nehmen wir diesen Namen und fügen einen Satz hinzu 57 00:04:08,110 --> 00:04:12,430 davor, um deutlich zu machen, dass dies die Funktion ist, um diesen Zustand zu ändern. 58 00:04:12,430 --> 00:04:17,230 SetIsAddMode ist also das, was wir am Ende aufrufen müssen, wenn diese Schaltfläche gedrückt wird. 59 00:04:17,230 --> 00:04:22,750 Hier können wir eine Inline-Funktion oder eine benannte Funktion verwenden und einfach den Handler hier hinzufügen, was immer 60 00:04:22,750 --> 00:04:23,700 Sie wollen. 61 00:04:24,130 --> 00:04:28,450 Ich gehe mit der Inline-Funktion und rufe set isAddMode auf und setze dies hier auf 62 00:04:28,480 --> 00:04:35,800 true, wenn diese Schaltfläche aufgerufen wird, damit wir das Modal öffnen. Jetzt können wir den isAddMode-Status, den wir ändern, annehmen und an 63 00:04:35,800 --> 00:04:43,760 die Zieleingabe übergeben, um dann die Sichtbarkeit des Modals dort zu ändern. Hier könnten wir also eine sichtbare Requisite hinzufügen, aber dieser Requisitenname 64 00:04:43,760 --> 00:04:50,120 liegt bei Ihnen, da er auf unserer eigenen Komponente liegt und ich den isAddMode an den sichtbaren 65 00:04:50,120 --> 00:04:51,680 Modus übergebe. Dies 66 00:04:51,680 --> 00:04:54,800 ist also der Status, den wir steuern, sodass 67 00:04:54,800 --> 00:04:59,660 der in isAddMode gespeicherte Wert übergeben wird als Wert für die sichtbare Stütze. 68 00:04:59,660 --> 00:05:03,710 Bei der Zieleingabe können wir daher jetzt diese sichtbare Requisite verwenden. Hier 69 00:05:03,710 --> 00:05:06,670 können wir also sichtbare Requisiten verwenden, die sich nun 70 00:05:06,740 --> 00:05:12,080 auf die sichtbare Requisite beziehen, die wir bei der Zieleingabe erhalten haben, und die wir dann 71 00:05:12,230 --> 00:05:17,170 an die sichtbare Requisite des Modals weiterleiten. Wenn wir das jetzt speichern und uns unsere 72 00:05:17,310 --> 00:05:22,440 App ansehen, wenn ich hier auf Neues Ziel hinzufügen drücke, sehen Sie diesen modalen Inhalt tatsächlich wieder hier oben. 73 00:05:22,590 --> 00:05:25,020 Offensichtlich sieht es hier nicht so schön aus, 74 00:05:25,020 --> 00:05:26,590 also sollten wir dies 75 00:05:26,700 --> 00:05:33,450 ändern und eine andere Sache, die ich ändern möchte, ist, dass eine Animation hier schön wäre, um das Modal zu öffnen, oder? 76 00:05:33,450 --> 00:05:40,740 Fügen wir hier also den Animationstyp hinzu, eine nette Eigenschaft, die wir hier festlegen können, und Sie können dies auf eine Zeichenfolge festlegen. Dort haben Sie 77 00:05:40,740 --> 00:05:45,210 drei Optionen - keine ist die Standardeinstellung, aber Sie können diese auf Folie einstellen, und 78 00:05:45,420 --> 00:05:48,450 jetzt sollte das Modal tatsächlich durch Schieben angezeigt werden oben. 79 00:05:48,490 --> 00:05:51,760 Wenn Sie also auf Neues Ziel hinzufügen klicken, wird dies 80 00:05:51,760 --> 00:05:53,430 jetzt auch unter Android angezeigt. 81 00:05:53,430 --> 00:05:59,130 Das ist eine viel bessere Benutzererfahrung. Ich würde sagen, der nächste Schritt besteht darin, dass wir sicherstellen, 82 00:05:59,130 --> 00:06:04,410 dass unsere Inhalte im Modal besser dargestellt werden, möglicherweise hier in der Mitte des Modals.