Jetzt, da wir diese Grundlagen aus dem Weg räumen und bevor wir tiefer in React Native
eintauchen und auch, wie wir unsere Apps ein bisschen schöner gestalten können, hat unser Styling
hier definitiv noch ein gewisses Aufwärtspotential, um es auszudrücken Bevor wir
das alles tauchen, möchte ich Ihnen eine weitere aufregende Komponente zeigen, die in React
Native integriert ist und die zeigt, wie einfach Sie React Native-Apps coole Funktionen hinzufügen können, und das
ist die modale Komponente.
Sie finden es natürlich in den offiziellen Dokumenten in diesem Handbuch zu Komponenten und
APIs. Hier und da finden Sie ein Modal.
Jetzt ist es unter anderen und hier ist dieses Modal eine nette Komponente, mit der Sie mit
ein wenig Aufwand eine so schöne Überlagerung, eine Vollbild-Überlagerung, hinzufügen können.
Fügen wir nun ein Modal hinzu, um unsere Zieleingabe tatsächlich zu hosten. Im Moment
befindet sich die Zieleingabe hier oben und das ist in
Ordnung, aber ich möchte das tatsächlich in ein Modal verschieben, damit wir es am Ende auf einem Vollbild-Overlay
haben Wir haben hier oben
nur einen Knopf, also anstelle der Zieleingabe, die dieses Modal öffnet.
Gehen wir also zur Zieleingabe und
dort
möchte ich dies in ein Modal einwickeln. Also werde ich Modal aus
React Native importieren, da es sich
um eine Komponente handelt, die mit React Native ausgeliefert wird, und dort möchte
ich dieses Modal um meine Ansicht hier verwenden ein
bisschen ja, unser Styling ist aus,
wir verlieren
die Polsterung, die wir ursprünglich eingerichtet haben, oder?
In App. js, wir haben diese allgemeine Auffüllung in unserer
Bildschirmansicht, die diese äußere Ansicht ist. Sie wird sicherlich nicht mehr auf die beiden Plattformen angewendet, auf die
beiden Geräte, da unser Inhalt weit außerhalb dieses Bildschirms liegt, sodass Modal bereits etwas tut und
Natürlich sehen wir nicht so viel. Jetzt für modal, also für diese modale
Komponente, können Sie einen sichtbaren Schlüssel festlegen, der definiert, ob dies derzeit sichtbar ist oder
nicht, und der einen Booleschen Wert annimmt, wenn wir dies beispielsweise auf false setzen und danach, wenn
wir uns unsere
Anwendungen ansehen, wir natürlich leerer Bildschirm gesehen. Übrigens, falls Android nach dem Setzen von
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
Prozess dort unten, dem npm-Startprozess, erneut a, um dies neu zu starten auf Android.
Jetzt haben wir einen leeren Bildschirm, wenn dies auf false gesetzt
ist. Jetzt haben wir offensichtlich eine Hardcodierung, dies ist nicht die Lösung.
Stattdessen in App. js, ich möchte jetzt eine Schaltfläche haben, mit der wir dieses Modal öffnen können, und dann
schließen wir das Modal aus dem
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
das sehe, können wir natürlich auch diese Importe loswerden, die wir hier momentan
nicht verwenden.
Lassen Sie also einfach den Button-Import hier zusammen mit den anderen Importen, die wir
verwenden, und jetzt ganz oben können wir die Schaltfläche hinzufügen, das ist jedoch ein selbstschließendes Tag, und
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
ist
er und jetzt, wenn
wir diesen Knopf drücken, wollen wir diesen Modal zeigen, richtig? Jetzt müssen wir mehr Staat
verwalten.
Neben der Verwaltung der Kursziele werde ich jetzt auch festlegen, ob wir uns derzeit
im Kursadditionsmodus befinden oder nicht.
Wir sind also anfangs nicht so, dass der Anfangszustand, den ich einstelle, falsch ist, und ich werde meinen
Zustand hier benennen, und
das liegt natürlich ganz bei Ihnen. Ich werde ihn AddMode und SetIsAddMode nennen.
Auch diese Namen liegen
bei Ihnen. Ich habe hier nur eine Konvention, die Sie auch in den offiziellen React-Dokumenten finden. Hier versuchen wir, dem Staat, den
wir kontrollieren, einen passenden Namen zu geben. Dann nehmen wir diesen Namen und fügen einen Satz hinzu
davor, um deutlich zu machen, dass dies die Funktion ist, um diesen Zustand zu ändern.
SetIsAddMode ist also das, was wir am Ende aufrufen müssen, wenn diese Schaltfläche gedrückt wird.
Hier können wir eine Inline-Funktion oder eine benannte Funktion verwenden und einfach den Handler hier hinzufügen, was immer
Sie wollen.
Ich gehe mit der Inline-Funktion und rufe set isAddMode auf und setze dies hier auf
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
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
liegt bei Ihnen, da er auf unserer eigenen Komponente liegt und ich den isAddMode an den sichtbaren
Modus übergebe. Dies
ist also der Status, den wir steuern, sodass
der in isAddMode gespeicherte Wert übergeben wird als Wert für die sichtbare Stütze.
Bei der Zieleingabe können wir daher jetzt diese sichtbare Requisite verwenden. Hier
können wir also sichtbare Requisiten verwenden, die sich nun
auf die sichtbare Requisite beziehen, die wir bei der Zieleingabe erhalten haben, und die wir dann
an die sichtbare Requisite des Modals weiterleiten. Wenn wir das jetzt speichern und uns unsere
App ansehen, wenn ich hier auf Neues Ziel hinzufügen drücke, sehen Sie diesen modalen Inhalt tatsächlich wieder hier oben.
Offensichtlich sieht es hier nicht so schön aus,
also sollten wir dies
ä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?
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
drei Optionen - keine ist die Standardeinstellung, aber Sie können diese auf Folie einstellen, und
jetzt sollte das Modal tatsächlich durch Schieben angezeigt werden oben.
Wenn Sie also auf Neues Ziel hinzufügen klicken, wird dies
jetzt auch unter Android angezeigt.
Das ist eine viel bessere Benutzererfahrung. Ich würde sagen, der nächste Schritt besteht darin, dass wir sicherstellen,
dass unsere Inhalte im Modal besser dargestellt werden, möglicherweise hier in der Mitte des Modals.