In einem neuen Ortsbildschirm möchte ich in der Lage sein, einen Ort hinzuzufügen, und dafür
füge ich zunächst die Texteingabekomponente hinzu, die natürlich nichts mit nativen Gerätefunktionen zu tun hat, aber
wir brauchen das einfach auch, weil in Dort können wir jetzt eine solche Texteingabe hinzufügen, mit der der Benutzer den Titel eingeben kann.
Daher füge ich hier auch eine Textkomponente hinzu, in der ich Titel sage, die hier und
insgesamt als
Bezeichnung für diese Texteingabe dienen soll Außerdem möchte ich hier eine Bildlaufansicht, um meinen gesamten Inhalt zu verpacken, da ich nicht weiß, welches
Gerät der Benutzer verwenden wird, aber wir werden mehr als nur einen Titel hinzufügen, wir werden
auch eine Bildauswahl und eine Ortsauswahl hinzufügen Dieses Modul und damit das Scrollen dieser Seite ist wirklich wichtig.
Jetzt haben wir also die Titelbezeichnung und die dazugehörige Texteingabe, die vorerst nichts bewirkt,
dem Benutzer aber bald die Eingabe eines Titels ermöglicht.
Ich möchte auch sicherstellen, dass dieses Formular natürlich eingereicht werden kann.
Daher möchte ich hier auch eine Schaltflächenkomponente hinzufügen. Nach der Texteingabe hier habe ich meine Schaltfläche, auf der ich "Speicherplatz speichern für"
sage Fügen Sie hier beispielsweise eine Farbe hinzu und setzen Sie diese auf Farben. primär und dafür müssen Sie sicherstellen, dass Sie
die Farben hier konstant importieren und onPress wird dieses Formular später
senden, im Moment mache ich hier nichts.
Die Texteingabe kann natürlich auch konfiguriert werden, obwohl die meisten Grundkonfigurationen hier in Ordnung sind. Ich muss den
Tastaturtyp nicht ändern und so weiter, aber ein gewisses Styling wäre nett und das gilt tatsächlich
für die gesamte Seite.
Für diese Ansicht hier möchte ich hier beispielsweise einen Formstil hinzufügen, also eine Stilkennung für das Formular, damit
ich das Gesamtformular formatieren kann. Für den Titel
hier füge ich einen Beschriftungsstil hinzu und für die Texteingabe möchte ich auch meine eigenen Stile hinzufügen und ich werde
hier die Kennungstexteingabe verwenden. Lassen Sie uns zum Stylesheet gehen
und sicherstellen, dass wir hier etwas Styling hinzufügen. Für das Gesamtformular füge ich einen Rand
in alle Richtungen von 30 hinzu, damit er nicht direkt an den Rändern des Bildschirms sitzt.
Für die Beschriftung
möchte ich eine Schriftgröße von beispielsweise 18 festlegen und am unteren Rand von 15 einen Rand hinzufügen, damit zwischen der
Beschriftung und der Texteingabe sowie auf der Texteingabe selbst ein gewisser Abstand
besteht In der Lage, es zu sehen, füge ich hier einen Rand unten hinzu und setze seine
Farbe auf dieses Hellgrau mit diesem Hex-Code von #ccc und einer Randbodenbreite von 1 und habe dann auch einen Rand am unteren
Rand, also am Inhalt Darunter befindet sich der Button von jetzt 15, und was ich hier
auch hinzufügen werde, ist ein bisschen vertikale Polsterung, nur vier und ein bisschen
horizontale Polsterung, nur zwei. Wenn ich das speichere, schauen wir mal.
Wenn ich zum Bildschirm mit den neuen Orten gehe, ist dies das, was ich habe
und das sieht nicht allzu schäbig aus, auch auf Android. Wir können damit arbeiten, und darauf können wir aufbauen.
Jetzt macht diese Eingabe natürlich nichts, ich
möchte natürlich erfassen, was der Benutzer eingegeben hat, und um dies einfach zu halten, werde ich hier keine superkomplexe
Validierung oder ähnliches hinzufügen, sondern
nur den Wert erfassen und das ist es. Sie können natürlich eine Validierung hinzufügen, Sie können
einen Reduzierer
hinzufügen, wie wir es im Benutzereingabemodul getan haben, in dem Sie gelernt haben, wie Sie
komplexere Formulare auf alle Arten verwalten können. Auch hier werde ich dies sehr einfach halten und daher nur importieren den Use State
Hook von React hier, damit ich hier nur meine Werte erfassen kann.
Hier habe ich also meinen Titelwert und setze die Titelwertfunktion und verwende den Verwendungsstatus, um dies mit einer leeren Zeichenfolge zu
initialisieren. Dann füge ich hier eine Funktion hinzu, den
Titeländerungshandler, der den vom Benutzer eingegebenen Text empfängt und wo l Dann setze ich einfach meinen
Titelwert auf diesen Text und hier könnten Sie natürlich eine Validierung hinzufügen, aber um dies einfach zu halten, werde ich es nicht
tun.
Es ist der Titeländerungs-Handler, der jetzt hier bei der Texteingabe an die Stütze zum Ändern des Textes gebunden
werden
sollte. Dort zeige ich also auf den Titeländerungs-Handler und binde den Wert dieser Eingabe natürlich an meinen Titelwert, weil
Dort speichere ich die Benutzereingaben und damit haben wir
hier eine voll funktionsfähige Benutzereingabe, in der ich auch die Werte erfasse. Jetzt können wir den Titel bekommen,
wir haben auch einen
sicheren Platz.
Wann immer wir diese Schaltfläche drücken, möchte
ich sie speichern, damit ich meinen Handler zum Speichern von Orten habe. Dies ist eine Funktion, die ich an
diese Schaltfläche zum
Speichern von Orten binden möchte. Anstatt diese leere anonyme Funktion zu haben, zeige ich hier auf Speichern Platzieren Sie den
Handler auf dieser Schaltfläche zum Speichern von Orten. Dort möchte ich nun sicherstellen, dass dieser
Ort gespeichert wird. Dazu verwende ich erneut Redux.
Also werde ich Redux mit npm install installieren - Save Redux und auch React Redux und ich werde auch Redux Thunk installieren,
damit wir das auch verwenden können.
Im Moment brauche ich es nicht, weil ich nicht mit einem Server spreche, aber später, wenn wir
native Gerätefunktionen hinzufügen, werden Sie sehen, dass wir dort auch einige Funktionen haben, die asynchron sind
und auf deren Fertigstellung wir möglicherweise vorher warten möchten Wir senden tatsächlich eine Aktion aus, bei der
Redux Thunk uns genau helfen kann. Mit diesen drei installierten Paketen können wir nun Redux einrichten.