Wie bereits erwähnt, bin ich wieder in dem Projekt, an dem wir gearbeitet haben, und natürlich
interessiert mich jetzt der Bildschirm zum
Bearbeiten des Produkts hier. Dies ist der Bildschirm, auf dem ich diese Texteingaben hier mit meinen Beschriftungen und dann dem
habe Bei der Texteingabe, bei der wir derzeit eine sehr grundlegende
Eingabebehandlung haben, rufen wir zumindest die Benutzereingaben ab und speichern sie mithilfe des React-Status. Mit dem Use-Status-Hook geben
wir dann
die Android-Werte wieder in die Eingabe ein und das ist es.
Dies ermöglicht es uns, die Benutzereingaben zu erfassen und zu verwenden, aber zum einen können wir unsere
Arbeitsweise verbessern, diese wiederverwendbarer schreiben und wir machen keinerlei Validierung, also sind dies die
Dinge, die ich ändern möchte in diesem Modul.
Darüber hinaus konfigurieren wir unsere Eingaben in keiner Weise, was bedeutet,
dass derzeit alle Texteingaben gleich sind.
Wir ändern den Tastaturtyp, den wir präsentieren,
nicht. Wir bieten keine mehrzeiligen Eingaben an, zum Beispiel für längere Texte wie hier
für die Beschreibung. Nichts davon geschieht. Beginnen wir daher mit der Konfiguration dieser Eingaben,
bevor wir fortfahren zur Validierung und so weiter. Eine wichtige Konfiguration, die Sie Ihren Tastaturen hinzufügen
können, ist der Tastaturtyp. Der Tastatur-Propeller kann eingestellt werden und dort stehen Ihnen einige Werte zur Verfügung. Jetzt haben Sie hier einige
Werte, aber die offiziellen Dokumente sind auch ein Ort, den Sie konsultieren sollten, wenn Sie über den
Typ nachdenken, den Sie hier zuweisen möchten, denn wenn Sie die offizielle Dokumentation zur Texteingabe besuchen, sehen Sie natürlich
einige Beispiele, aber dann Sie sehen auch alle Requisiten, die Sie haben, und dort können
Sie mehr über die einzelnen Requisiten und deren Konfiguration erfahren.
Für den Tastaturtyp haben wir beispielsweise erfahren, dass nur diese Typen plattformübergreifend unterstützt werden.
Obwohl wir bestimmte iOS- und Android-Typen zur Verfügung haben, können diese Typen nur zusammen mit einer Plattformprüfung verwendet
werden, damit Sie sicherstellen, dass
Sie den Typ unter Android nicht verwenden, der dort nicht unterstützt wird und daher
keinen hat bewirken.
Daher werde ich mich an die plattformübergreifenden Typen halten, damit ich keine zusätzliche Plattformprüfung hinzufügen muss, und dort, normalerweise für normalen Text, würden
wir uns an die Standardeinstellungen halten, was natürlich ein Typ ist, den wir nicht haben müssen zuweisen, aber
das ändert sich zum Beispiel, wenn wir uns unseren Preis-Input ansehen. Dort möchte ich sicherstellen, dass die Leute nur gültige
Zahlen eingeben, dass sie keinen Text eingeben, und deshalb möchte ich natürlich die richtige Tastatur zeigen, um ihnen dabei
zu helfen, und wenn wir uns die offizielle Dokumentation
ansehen, sehen wir Es gibt drei plattformübergreifende Tastaturtypen, die wir anzeigen können: Ziffernblock, Dezimalblock
und numerisch. Dort ist beispielsweise der Dezimalblock eine Eingabe, mit der der Benutzer Dezimalzahlen eingeben kann, was genau das ist,
was ich hier für meinen Preis möchte. Daher ist es sehr sinnvoll, diesen
Tastaturtyp hier einzustellen, denn wenn wir uns jetzt diese Preiseingabe
hier ansehen und die Softtastatur umschalten, die Sie mit der Verknüpfung Befehl k hier unter iOS oder
mit dem Hardware-Menü dort oben ausführen können, dann Tastatur, Software-Tastatur umschalten, sehen Sie, dass ich jetzt diese Dezimaltastatur hier geöffnet habe,
während ich bei den anderen Eingaben eine normale Texttastatur habe und das natürlich
auch bei Android.
Wenn wir dort zum Administrator gehen und uns dann den Preis ansehen, sehen wir auch, dass dort
diese nummerfreundliche Eingabe anstelle der normalen Texttastatur angezeigt wird, die wir in den anderen Eingabefeldern erhalten.
So können wir das konfigurieren und dies ist natürlich eine wichtige Konfiguration. Wir können auch andere Dinge
konfigurieren, zum Beispiel hier auf der Titeleingabe hier.
Wenn Sie auf den Kontrollbereich klicken und sich die automatische Vervollständigung ansehen, sehen Sie, dass Sie eine Reihe von Dingen
konfigurieren können, z. B. ob diese automatisch großgeschrieben werden soll. Dort haben Sie verschiedene Werte, die Sie
festlegen können, zum Beispiel, dass das Zeichen groß geschrieben werden soll, nur vollständige Sätze oder Wörter,
und hier werde ich zum Beispiel vollständige Sätze verwenden, um diese groß zu schreiben.
Sie können auch die Autokorrektur aktivieren. Wenn Sie sie wie folgt hinzufügen, stellen Sie sicher, dass die automatische Korrektur für diesen
Eingang aktiviert ist. Wenn Sie sie auf false setzen, können Sie sie deaktivieren oder einfach weglassen. Dies
ist auch eine Option und so weiter . Es gibt eine Reihe von Dingen, die Sie konfigurieren
können, und ich würde wie immer dringend empfehlen, dass Sie sich auch die offiziellen Dokumente ansehen, um mehr
über die verfügbaren Konfigurationsoptionen und deren
Funktionsweise zu erfahren. Spielen Sie auch einfach mit diesen herum, damit Sie eine erhalten Idee, was Sie dort tun können und
was jede Option tut und was für Ihre nächste Anwendung sinnvoll sein könnte. Ein weiterer Wert, den ich zum Beispiel festlegen
möchte, ist der Return-Key-Typ.
Dies kann auf einige Werte eingestellt werden.
Wenn Sie die offiziellen Dokumente überprüfen, werden Sie feststellen, dass nicht alle Werte auf allen
Plattformen verfügbar sind, sondern nur diese fünf plattformübergreifend verfügbar sind. Dort können Sie diese Schaltfläche im Grunde
unten konfigurieren rechte Ecke. Wenn Sie sich Ihre Eingabe hier
ansehen und in eine der Eingaben klicken, ist es diese Schaltfläche hier in der unteren rechten Ecke, die
hier für die imageUrl zurücksendet. Beim Titel setze ich ihn auf "Weiter".
Wenn Sie also in das Titelfeld klicken, wird hier "breiter" angezeigt. Dies ist Deutsch für "Weiter". Dies liegt nur daran, dass
ich hier einen deutschen Emulator habe und diesen auch neu starten kann auf Android, weil es dort abgestürzt ist, damit ich
es auch dort zeigen kann.
Wenn wir dort zu unserer Eingabe gehen, klicken Sie in den Titel, Sie sehen diese nächste Schaltfläche
hier, auf der imageUrl, Sie haben diese Schaltfläche hier und diese kann mit dem Rückgabetastentyp
konfiguriert werden. Beachten Sie jedoch, dass dies nur steuert, wie Dies wird angezeigt, was dort steht, wie die Beschriftung
dort ist oder welche Art von Schaltfläche
angezeigt wird. Es ändert sich nicht automatisch, was diese Schaltfläche bewirkt. Wenn ich beispielsweise auf die breitere Schaltfläche klicke,
wird diese
Tastatur geschlossen. Dies gilt auch, wenn Ich klicke hier auf die Eingabetaste.
Wenn wir nun über das Verhalten von Texteingaben sprechen, sind alle Ereignisse, die wir hören können, interessant.
Mit on erhalten Sie eine Vorstellung von allen Ereignissen, die Sie anhören
können, und dort haben Sie beispielsweise onBlur, das ausgelöst wird, wenn eine Eingabe den Fokus verliert. OnChange wird ausgelöst, also
bei jedem Tastendruck und gibt Ihnen das vollständige Eingabeereignis, onChangeText, das ebenfalls ausgelöst wird Bei jedem Tastendruck erhalten
Sie jedoch nur den eingegebenen Text, an dem Sie normalerweise mehr interessiert sind.
onEndEditing, wo wir auch eine Vorstellung davon bekommen können, wann dies ausgelöst wird. Wenn ich also onEndEditing hier eingebe, sehen wir uns an, wann dies
in der Konsole gedruckt wird.
Wenn ich jetzt hier zu meiner Eingabe gehe und bitte beachte, dass ich bei der Titeleingabe bin, also wenn Ich tippe dort Test, wir sehen, dass
es hier nicht ausgelöst hat, wenn ich
darauf klicke, wird es jetzt auf EndEditing ausgelöst. Das Gleiche gilt, wenn ich hier zum Beispiel auf
die breitere Schaltfläche klicke, also grundsätzlich immer dann, wenn wir diese Tastatur mit dem Fokus verlassen, oder im Allgemeinen, wenn wir dort auch
auf die Schaltfläche "Fertig" klicken.
Darüber hinaus haben wir auch andere Listener, wie zum Beispiel onFocus, das offensichtlich ausgelöst wird, wenn diese Eingabe
den Fokus erhält, oder onSelectionChange, wenn wir dort Text auswählen, oder onSubmitEditing, das ausgelöst wird, wenn auf diese Schaltfläche geklickt wird. Wenn ich also
onSubmitEditing hier hinzufüge, wenn ich Fügen
Sie auch diesen Listener hinzu und fügen Sie eine Konsolenprotokollanweisung hinzu. Sie sehen, dass dies jetzt ausgelöst wird, wenn ich hier tippe, nicht
ausgelöst wird, wenn ich hier rausklicke, es auch nicht ausgelöst wird, wir nur das onEndEditing erhalten Melden Sie
sich hier
an, aber es wird ausgelöst, wenn ich hier die breitere Taste drücke. Dort sehen Sie onSubmitEditing. Dies
ist also ein Listener,
den Sie abhören würden, wenn Sie auf die Eingabetaste klicken, und dann können Sie
tun, was Sie wollen, wie z Daten oder verschieben Sie den Fokus automatisch auf die nächste
Eingabe mit Hilfe von Referenzen, zum Beispiel, wenn Sie möchten.
So können Sie dies konfigurieren, und wie gesagt, ich würde empfehlen, dass Sie sich damit befassen,
um ein Gefühl dafür zu bekommen,
wie dies funktioniert. Ich werde jetzt jedoch weitermachen und sicherstellen, dass wir nicht nur Eingaben anhören und speichern Sie
die Werte, aber wir überprüfen auch, was der Benutzer eingibt.