Beginnen wir also mit der Implementierung der Authentifizierung. Ein sehr wichtiger Schritt dazu ist, dass wir einen
neuen Bildschirm hinzufügen, den Authentifizierungsbildschirm, auf dem ein Anmelde- oder Anmeldeformular angezeigt werden soll, mit dem sich der
Benutzer anmelden oder anmelden kann Hier im Authentifizierungsbildschirm
importiere ich React from React und importiere auch einige Dinge
aus React Native, da ich von dort aus React Native die Bildlaufansicht haben möchte, weil wir
ein Formular erstellen und ich möchte Stellen Sie sicher, dass Benutzer aller Gerätegrößen
damit interagieren können.
Ich werde hier ein Stylesheet hinzufügen und das sollte es jetzt sein, wir
können immer mehr hinzufügen, wenn wir mehr brauchen.
Wir können auch bereits eine Ansicht und die Tastatur einschließen, um eine Ansicht zu vermeiden. Ich denke, um sicherzustellen,
dass alle Eingaben immer erreichbar sind.
Wenn wir jetzt von Eingaben sprechen, werden wir natürlich ein Formular hinzufügen, und deshalb werde ich die Eingabekomponente
wiederverwenden, die wir im Formularabschnitt erstellt haben, den ich im Ordner der Komponenten-Benutzeroberfläche finden kann.
Sehen Sie sich also diesen Abschnitt an, um zu erfahren, was diese Komponente tut und wie
wir ein Formular damit verwalten können.
Damit können wir hier die Auth-Screen-Komponente erstellen, die Requisiten empfängt, und wir können dieses
Styles-Objekt auch mit dem Stylesheet und der
dortigen Create-Methode erstellen und natürlich den Auth-Screen wie folgt exportieren.
Nun stellt sich natürlich auch die Frage, wie wir diesen Authentifizierungsbildschirm präsentieren. Wie stellen wir sicher, dass dies angezeigt wird,
wenn wir nicht angemeldet sind?
Das ist etwas, das wir in diesem Modul verfeinern werden, aber um zu beginnen, können
wir zum Navigator gehen und sicherstellen, dass beim Start der App dieser Authentifizierungsbildschirm angezeigt wird, und dafür
können wir einen speziellen neuen Navigator verwenden, den wir nicht haben verwendet, bevor es speziell für diesen
Anwendungsfall entwickelt wurde, könnte man fast sagen, dass die Funktion zum Erstellen eines Switch-Navigators, die
uns dort hilft, einen solchen Switch-Navigator erstellt. Das Besondere an diesem Navigator ist, dass immer genau
ein Bildschirm angezeigt wird und Sie nicht zu einem anderen Bildschirm zurückkehren können, wenn Sie dann zu einem anderen navigieren.
Ein Zurück ist also ausdrücklich nicht erlaubt, was genau das ist, was wir wollen, da Sie nicht in
der Lage sein sollten, zum Anmeldebildschirm zurückzukehren, wenn Sie sich nur angemeldet haben.
Deshalb werde ich hier am Ende der Datei einen neuen Navigator erstellen, vielleicht meinen Hauptnavigator. Der Name
liegt natürlich ganz bei Ihnen, mit create switch navigator, und genau wie zuvor nimmt dieser Navigator ein Argument,
das wir konfigurieren Es ist also ein Objekt, in dem wir es konfigurieren und dort möchte ich
meinen Authentifizierungsbildschirm und natürlich auch meinen Shop-Stack danach binden. Um einen schönen Header zu haben, werde
ich hier auch meinen Auth-Navigator erstellen, der ein Stack-Navigator ist, der mit Create-Stack-Navigator erstellt wurde, und dort werde ich nur
den Auth-Bildschirm zuordnen, an dem ich gerade angefangen habe, und dafür
natürlich wir müssen es importieren, also in diesem ShopNavigator. In js-Datei können wir den Authentifizierungsbildschirm vom Benutzerauthentifizierungsbildschirm wie folgt importieren.
Wenn
dieser Import hinzugefügt wird, ordnen wir dies hier der Authentifizierung im Authentifizierungsnavigator zu, und der Authentifizierungsnavigator wird
dann der Authentifizierung hier im Switch-Navigator und zugeordnet Der Shop ist natürlich dem Shop-Navigator zugeordnet und jetzt
ist es der Hauptnavigator, den wir mit dem App-Container zum Erstellen umschließen. Wenn
wir diesen speichern, wird der Authentifizierungsbildschirm als der erste Bildschirm gerendert, der derzeit
keinen gültigen Bildschirm wiedergibt
jsx, also bekommen wir eine Fehlermeldung, aber wir können natürlich daran arbeiten, da das Ziel jetzt darin besteht, diesen Authentifizierungsbildschirm
zu rendern, auf dem wir uns anmelden und unser Ding machen können. Also hier möchte ich diese Eingaben präsentieren und ich werde tatsächlich auch
die Kartenkomponente von der Komponenten-UI-Karte importieren, damit diese schöne Karte hier aussieht und meine Eingaben dort sind, und natürlich ist dies völlig
optional, aber hier werde ich hinzufügen Hier füge ich die
Karte hinzu und in der Karte können wir die Bildlaufansicht hinzufügen, damit wir innerhalb dieser Karte scrollen
können. Natürlich können Sie auch die Bildlaufansicht um die Karte herum hinzufügen, damit
Sie auf dem Gesamtbildschirm scrollen können Bildschirm, aber ich mache es so, füge hier auch meinen eigenen Stil zu der Karte
hinzu, die ich vielleicht als Auth-Container bezeichne. Der Name liegt ganz bei dir und ich werde auch all das hier als Umhüllung
betrachten Ansicht, wo ich einen Stil hinzufügen werde, den ich Bildschirm benennen werde. Eigentlich können wir hier bereits die Tastatur verwenden, um die Sicht zu vermeiden, denke ich, mit
einem Verhalten des Auffüllens und dann dieser vertikale Versatz der Tastatur, sagen wir 50. In dieser Bildlaufansicht, die wir auf unserer Karte
haben, können wir nun die Eingaben hinzufügen, die benutzerdefinierten Eingaben, die wir zuvor
im Kurs erstellt haben. Zum Beispiel hier eine Eingabe mit der ID-E-Mail
und einem E-Mail-Label, da ich dort die Benutzer-E-Mail-Adresse und damit den Tastaturtyp der E-Mail-Adresse abrufen möchte, der sowohl unter iOS
als auch unter Android unterstützt wird.
Es sollte auch erforderlich sein und ich möchte den E-Mail-Validator verwenden. Dies sind zwei der
Validierungsfunktionen, die ich zuvor in diesem Kurs in die Eingabe eingebaut habe. Auch die automatische Großschreibung sollte deaktiviert
sein, damit ich sie auf keine setze, da sie in der aktiviert ist Die
E-Mail-Adresse ist wirklich nicht hilfreich und die Fehlermeldung, die ich anzeigen möchte, wenn etwas nicht stimmt, lautet: Geben Sie bitte eine gültige E-Mail-Adresse ein.
Wenn sich der Wert ändert, also bei einer Wertänderung, möchten wir etwas tun, aber im Moment
werde ich hier nichts tun, sondern nur eine leere Funktion bereitstellen, damit wir keinen Fehler und den Anfangswert
erhalten, den ich anzeigen möchte Hier ist das am
Ende nur eine leere Zeichenfolge, da ich keinen anderen Anfangswert angeben möchte.
Jetzt ist es natürlich nicht die einzige Eingabe, daher wiederhole ich dies, da
ich hier auch eine Passworteingabe mit Kennwortbezeichnung benötige und der Tastaturtyp hier standardmäßig sein sollte, da ich das normale Textschlüsselwort haben möchte, aber möchte
Verdecken
Sie die Eingabe, damit wir sie nicht sehen können. Dies
kann durch Hinzufügen einer sicheren Texteingabe hier erfolgen.
Dies ist natürlich keine Requisite, die von meiner benutzerdefinierten Komponente
unterstützt wird. Beachten Sie jedoch, dass wir in dieser Komponente alle Requisiten an die integrierte Texteingabe
weiterleiten und die integrierte Texteingabe diese sichere Texteingabeeigenschaft hier unterstützt. Deshalb habe ich
kann dies einstellen. Hier sollte die
Validierung auch nicht prüfen, ob es sich um eine E-Mail-Adresse handelt, sondern
sicherstellen, dass wir eine Mindestlänge von beispielsweise fünf Zeichen haben. Die automatische Großschreibung kann auch hier deaktiviert werden. Eine Fehlermeldung
wäre, bitte geben Sie ein gültiges Passwort ein und damit habe ich gerade gesehen, dass ich hier natürlich einen
Tippfehler habe, das sollte E-Mail-Adresse sein, hier Passwort und ich werde dies hier belassen wie es ist.
Um dies jetzt einreichen zu
können, benötige ich auch eine Schaltfläche. Daher importiere ich hier eine Schaltfläche aus React Native und füge zwei Schaltflächen tatsächlich in
die
Karte und damit auch in die Bildlaufansicht ein. Die erste Schaltfläche hat den Titel "Anmelden".
Nehmen wir an, wir ändern diesen entweder in "Anmelden" oder "Anmelden", je nachdem, in welchem
Modus wir uns befinden und die Farbe importiert oder mithilfe der Farbkonstante hinzugefügt wird, die Sie verwenden sollten
importieren und auf diesen Farben konstant werde ich Farben verwenden. primär und onPress können im Moment einfach auf eine leere Funktion zeigen
und ich werde dies wiederholen, weil ich eine zweite Schaltfläche haben möchte, auf der
ich Schalter zum Anmelden sage und natürlich auch später Schalter zum Anmelden sagen, wenn wir angemeldet sind up-Modus und dort
können wir vielleicht unsere Akzentfarbe verwenden. Wenn wir das jetzt speichern, sollten wir einen einfachen
Anmeldebildschirm haben, hier sieht es nicht so aus, wie es aussehen
sollte, aber wir haben unsere
Eingaben hier, wir haben diese beiden Schaltflächen, auch auf Android, sobald
dies fertig ist,
hier wir gehen und jetzt möchte ich das natürlich angemessen stylen.
Gehen wir also zum Stylesheet
und beachten Sie, dass mir am Ende zwei Stile zugewiesen sind - Bildschirm und Authentifizierungscontainer. Hier in den Stilen, die
ich sowohl Bildschirm- als auch Authentifizierungscontainer hinzufügen möchte, sind
dies die beiden Stile, mit denen ich arbeiten möchte. Jetzt für den Bildschirm werde ich Flex auf
eins setzen und dann meinen Inhalt in der Mitte ausrichten und die Elemente in der Mitte so ausrichten,
dass sie sowohl auf
der vertikalen als auch auf der horizontalen Achse zentriert sind. Auf dem Authentifizierungscontainer möchte
ich eine Breite festlegen von sagen wir 80%, um nicht die volle verfügbare Breite und eine
maximale Breite von tatsächlich 400 Pixel zu nehmen, falls 80% mehr als das wären, beschränken wir uns auf 400 Pixel und vielleicht eine Höhe von sagen wir 50%, aber eine maximale Höhe von auch 400.
Mal sehen, wie das aussieht. Wenn
wir das speichern, bekomme
ich das hier.
Jetzt kann ich dort hinein scrollen, weil ich eine solche Bildlaufansicht eingerichtet habe und das eigentlich nicht das Verhalten ist,
das ich will.
Ich werde hier keine
Höhe festlegen, sondern nur eine maximale Höhe hinzufügen, damit diese auf eine
bestimmte Höhe begrenzt wird. Standardmäßig wird jedoch nur die erforderliche Höhe benötigt, und daher füge
ich stattdessen eine Polsterung hinzu, damit wir eine haben Platz um die Eingänge und es sitzt nicht
am
Rand der Karte, also sieht das viel besser aus und mal sehen, wie das auf Android aussieht, ja sieht
im Allgemeinen in Ordnung aus.
Wenn ich dort tippe, wird auch
ein Bildlauf durchgeführt, sodass die Tastatur, die die Ansicht vermeidet, ihre Aufgabe erfüllt, aber natürlich wird hier immer noch ein
Fehler angezeigt, der bei einer Eingabeänderung einen Fehler verursacht, da ja, ich habe
hier eine Wertänderung hinzugefügt, das sollte sein bei Eingangsänderung, nicht bei Wertänderung.
Das ist also eine kleine Lösung, aber wir gehen in die richtige Richtung.
Jetzt bin ich aber noch nicht fertig, ich
möchte einen Header-Titel haben und wie wäre es mit einer Hintergrundfarbe hier, das wäre wahrscheinlich auch schön.
In Bezug auf den Header-Titel können wir natürlich AuthScreen hinzufügen. navigationOptions und arbeiten vorerst mit einigen statischen
Optionen, da ich hier nur einen Header-Titel hinzufügen und diesen so einstellen möchte,
dass er sich bitte authentifiziert oder nur authentifiziert, so etwas und
für den
Hintergrund können wir hier natürlich unsere Ansicht geben, die alles enthält Hintergrundfarbe,
aber ich möchte Ihnen tatsächlich eine neue Komponente zeigen, die wir bisher noch nicht
verwendet haben. Dazu müssen wir ein brandneues Paket installieren. Dies ist das Expo-Linear-Gradient-Paket, das Sie mit npm
install --save installiert haben expo-linearer Gradient.
Dies ist ein Paket, mit dem wir mühelos
einen linearen Verlauf hinzufügen
können. Auf sehr einfache Weise und nachdem dieser installiert wurde, müssen Sie nur noch
aus dem expo-linearen Verlauf importieren und importieren eine Komponente, die dadurch verfügbar gemacht wird lineare Gradientenkomponente.
Nun, das ist eine Komponente, die Sie auf Ihrer Seite verwenden können, und hier werde ich sie innerhalb
der Tastatur verwenden, um eine Ansicht und einen linearen Verlauf wie diesen zu vermeiden und sie hier und da um alle
anderen
Inhalte wie diesen zu wickeln Ich möchte sicherstellen, dass dies einen Farbschlüssel hat, mit dem wir die Farben
zwischen dem Übergang festlegen können, da ein Verlauf einfach ein Verlauf zwischen mehreren Farben ist,
mindestens zwei, aber Sie können mehr hinzufügen und dort können Sie jetzt einfach Farben hinzufügen,
wie z rot oder durch Hinzufügen der Hex-Codes und ich möchte zwischen #ffedff und einem anderen Hex-Code, # ffe3ff, wechseln und natürlich
können Sie hier mit verschiedenen Farben experimentieren.
Jetzt müssen wir hier auch einen Stil hinzufügen, und ich werde diesen Stilverlauf benennen, den wir jetzt hier unten hinzufügen können.
Dieser Verlauf hat eine Breite von 100% und eine Höhe von 100%, also nimmt er die gesamte Breite und Höhe an
kann bekommen, so sieht es also aus, aber jetzt haben wir ein
Problem, natürlich ist
unser Inhalt nicht mehr zentriert. Um sicherzustellen, dass dies
der Fall ist, müssen wir jetzt Begründungsinhalte hinzufügen und Elemente erneut ausrichten. Daher können
wir
dies hier auf dem umgebenden Bildschirm beseitigen.
Jetzt sehen wir genauso aus wie
zuvor, natürlich können wir dies auch erreichen, indem wir nicht Breite und Höhe einstellen, sondern nur eine biegen.
Jetzt mit diesem Setup hier und es ist wichtig, dass der Bildschirm nicht versucht
zu zentrieren, da
sonst der Farbverlauf zentriert wird, aber mit diesem Setup haben wir jetzt diesen Look mit diesem schönen Farbverlauf und
um unseren Header-Titel hier zu sehen, müssen wir nur Stellen Sie sicher, dass wir im Navigations-Setup im Shop-Navigator
unsere Standard-Navigations-Requisiten dem Auth-Navigator zuweisen.
Daher füge ich das zweite Argument hinzu, um einen Stapelnavigator zu erstellen, und die Standardnavigationsoptionen zeigen
nur auf die Standardnavigationsoptionen, mit denen die Kopfzeilenfarbe, die Kopfzeilen-Titelfarbe usw. festgelegt werden.
Stellen Sie natürlich sicher, dass Sie hier in den Navigationsoptionen des Authentifizierungsbildschirms im Authentifizierungsbildschirm keinen Tippfehler haben,
wie ich es tue.
Wenn dies behoben ist, ist dies das Setup, das wir hier haben. Natürlich
können Sie mit den Farben experimentieren und verschiedene Farben verwenden, wenn
Sie dies bevorzugen. Ich bin damit zufrieden und jetzt möchte ich nur noch mein Styling korrigieren Für die Schaltflächen
wäre ein gewisser Abstand um sie herum schön, und das kann leicht hinzugefügt werden, indem die Schaltflächen hier in Ansichten eingeschlossen werden, eigentlich beide Schaltflächen.
Also mache ich das hier und gebe jetzt jeder Ansicht hier einen Stil, vielleicht Stile-Schaltflächencontainer, mache dies in der ersten Ansicht und in der zweiten Ansicht und
jetzt können wir diesem Schaltflächencontainer dort
unten im Stylesheet und hier ein Styling geben Sie können beispielsweise
einen Rand oben auf 10 setzen, um sicherzustellen, dass jeder Knopf einen kleinen Rand oben hat, damit
die Knöpfe nicht direkt nebeneinander sitzen, was meiner Meinung nach unseren Knöpfen wirklich
helfen würde.
Das sieht also unter iOS
gut aus. Schauen wir uns das auch unter Android
an. Ja, das sieht nicht schlecht aus.
Damit haben wir diese Grundeinstellung. Stellen wir nun sicher, dass dies auch etwas Nützliches bewirkt und dass
wir tatsächlich versuchen, uns damit anzumelden.