1 00:00:02,260 --> 00:00:07,540 Wie bereits erwähnt, bin ich wieder in dem Projekt, an dem wir gearbeitet haben, und natürlich 2 00:00:07,540 --> 00:00:09,640 interessiert mich jetzt der Bildschirm zum 3 00:00:09,640 --> 00:00:16,060 Bearbeiten des Produkts hier. Dies ist der Bildschirm, auf dem ich diese Texteingaben hier mit meinen Beschriftungen und dann dem 4 00:00:16,060 --> 00:00:19,540 habe Bei der Texteingabe, bei der wir derzeit eine sehr grundlegende 5 00:00:19,540 --> 00:00:25,390 Eingabebehandlung haben, rufen wir zumindest die Benutzereingaben ab und speichern sie mithilfe des React-Status. Mit dem Use-Status-Hook geben 6 00:00:25,450 --> 00:00:26,460 wir dann 7 00:00:26,560 --> 00:00:30,200 die Android-Werte wieder in die Eingabe ein und das ist es. 8 00:00:30,310 --> 00:00:37,210 Dies ermöglicht es uns, die Benutzereingaben zu erfassen und zu verwenden, aber zum einen können wir unsere 9 00:00:37,210 --> 00:00:42,730 Arbeitsweise verbessern, diese wiederverwendbarer schreiben und wir machen keinerlei Validierung, also sind dies die 10 00:00:42,760 --> 00:00:46,510 Dinge, die ich ändern möchte in diesem Modul. 11 00:00:46,530 --> 00:00:50,850 Darüber hinaus konfigurieren wir unsere Eingaben in keiner Weise, was bedeutet, 12 00:00:50,940 --> 00:00:53,850 dass derzeit alle Texteingaben gleich sind. 13 00:00:53,850 --> 00:00:57,140 Wir ändern den Tastaturtyp, den wir präsentieren, 14 00:00:57,270 --> 00:01:02,910 nicht. Wir bieten keine mehrzeiligen Eingaben an, zum Beispiel für längere Texte wie hier 15 00:01:02,910 --> 00:01:08,370 für die Beschreibung. Nichts davon geschieht. Beginnen wir daher mit der Konfiguration dieser Eingaben, 16 00:01:08,370 --> 00:01:15,120 bevor wir fortfahren zur Validierung und so weiter. Eine wichtige Konfiguration, die Sie Ihren Tastaturen hinzufügen 17 00:01:15,180 --> 00:01:21,420 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 18 00:01:21,420 --> 00:01:26,970 Werte, aber die offiziellen Dokumente sind auch ein Ort, den Sie konsultieren sollten, wenn Sie über den 19 00:01:26,970 --> 00:01:33,230 Typ nachdenken, den Sie hier zuweisen möchten, denn wenn Sie die offizielle Dokumentation zur Texteingabe besuchen, sehen Sie natürlich 20 00:01:33,230 --> 00:01:38,270 einige Beispiele, aber dann Sie sehen auch alle Requisiten, die Sie haben, und dort können 21 00:01:38,270 --> 00:01:41,450 Sie mehr über die einzelnen Requisiten und deren Konfiguration erfahren. 22 00:01:41,450 --> 00:01:46,010 Für den Tastaturtyp haben wir beispielsweise erfahren, dass nur diese Typen plattformübergreifend unterstützt werden. 23 00:01:46,160 --> 00:01:52,080 Obwohl wir bestimmte iOS- und Android-Typen zur Verfügung haben, können diese Typen nur zusammen mit einer Plattformprüfung verwendet 24 00:01:52,130 --> 00:01:53,750 werden, damit Sie sicherstellen, dass 25 00:01:53,750 --> 00:01:58,310 Sie den Typ unter Android nicht verwenden, der dort nicht unterstützt wird und daher 26 00:01:58,310 --> 00:01:59,560 keinen hat bewirken. 27 00:02:00,230 --> 00:02:06,430 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 28 00:02:06,440 --> 00:02:11,600 wir uns an die Standardeinstellungen halten, was natürlich ein Typ ist, den wir nicht haben müssen zuweisen, aber 29 00:02:11,600 --> 00:02:18,110 das ändert sich zum Beispiel, wenn wir uns unseren Preis-Input ansehen. Dort möchte ich sicherstellen, dass die Leute nur gültige 30 00:02:18,110 --> 00:02:24,860 Zahlen eingeben, dass sie keinen Text eingeben, und deshalb möchte ich natürlich die richtige Tastatur zeigen, um ihnen dabei 31 00:02:24,860 --> 00:02:27,850 zu helfen, und wenn wir uns die offizielle Dokumentation 32 00:02:28,130 --> 00:02:33,170 ansehen, sehen wir Es gibt drei plattformübergreifende Tastaturtypen, die wir anzeigen können: Ziffernblock, Dezimalblock 33 00:02:33,350 --> 00:02:40,460 und numerisch. Dort ist beispielsweise der Dezimalblock eine Eingabe, mit der der Benutzer Dezimalzahlen eingeben kann, was genau das ist, 34 00:02:40,460 --> 00:02:46,250 was ich hier für meinen Preis möchte. Daher ist es sehr sinnvoll, diesen 35 00:02:46,250 --> 00:02:50,660 Tastaturtyp hier einzustellen, denn wenn wir uns jetzt diese Preiseingabe 36 00:02:51,080 --> 00:02:58,460 hier ansehen und die Softtastatur umschalten, die Sie mit der Verknüpfung Befehl k hier unter iOS oder 37 00:02:58,520 --> 00:03:07,340 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, 38 00:03:07,340 --> 00:03:12,860 während ich bei den anderen Eingaben eine normale Texttastatur habe und das natürlich 39 00:03:13,220 --> 00:03:14,750 auch bei Android. 40 00:03:14,750 --> 00:03:20,590 Wenn wir dort zum Administrator gehen und uns dann den Preis ansehen, sehen wir auch, dass dort 41 00:03:20,590 --> 00:03:26,200 diese nummerfreundliche Eingabe anstelle der normalen Texttastatur angezeigt wird, die wir in den anderen Eingabefeldern erhalten. 42 00:03:26,480 --> 00:03:33,840 So können wir das konfigurieren und dies ist natürlich eine wichtige Konfiguration. Wir können auch andere Dinge 43 00:03:34,010 --> 00:03:38,840 konfigurieren, zum Beispiel hier auf der Titeleingabe hier. 44 00:03:39,060 --> 00:03:43,950 Wenn Sie auf den Kontrollbereich klicken und sich die automatische Vervollständigung ansehen, sehen Sie, dass Sie eine Reihe von Dingen 45 00:03:43,950 --> 00:03:49,560 konfigurieren können, z. B. ob diese automatisch großgeschrieben werden soll. Dort haben Sie verschiedene Werte, die Sie 46 00:03:49,560 --> 00:03:55,590 festlegen können, zum Beispiel, dass das Zeichen groß geschrieben werden soll, nur vollständige Sätze oder Wörter, 47 00:03:55,590 --> 00:04:01,020 und hier werde ich zum Beispiel vollständige Sätze verwenden, um diese groß zu schreiben. 48 00:04:01,140 --> 00:04:07,350 Sie können auch die Autokorrektur aktivieren. Wenn Sie sie wie folgt hinzufügen, stellen Sie sicher, dass die automatische Korrektur für diesen 49 00:04:07,350 --> 00:04:12,540 Eingang aktiviert ist. Wenn Sie sie auf false setzen, können Sie sie deaktivieren oder einfach weglassen. Dies 50 00:04:12,540 --> 00:04:18,120 ist auch eine Option und so weiter . Es gibt eine Reihe von Dingen, die Sie konfigurieren 51 00:04:18,120 --> 00:04:23,730 können, und ich würde wie immer dringend empfehlen, dass Sie sich auch die offiziellen Dokumente ansehen, um mehr 52 00:04:23,790 --> 00:04:25,930 über die verfügbaren Konfigurationsoptionen und deren 53 00:04:25,980 --> 00:04:32,400 Funktionsweise zu erfahren. Spielen Sie auch einfach mit diesen herum, damit Sie eine erhalten Idee, was Sie dort tun können und 54 00:04:32,400 --> 00:04:40,090 was jede Option tut und was für Ihre nächste Anwendung sinnvoll sein könnte. Ein weiterer Wert, den ich zum Beispiel festlegen 55 00:04:40,090 --> 00:04:42,580 möchte, ist der Return-Key-Typ. 56 00:04:42,580 --> 00:04:44,920 Dies kann auf einige Werte eingestellt werden. 57 00:04:44,980 --> 00:04:50,350 Wenn Sie die offiziellen Dokumente überprüfen, werden Sie feststellen, dass nicht alle Werte auf allen 58 00:04:50,440 --> 00:04:56,260 Plattformen verfügbar sind, sondern nur diese fünf plattformübergreifend verfügbar sind. Dort können Sie diese Schaltfläche im Grunde 59 00:04:56,260 --> 00:05:00,130 unten konfigurieren rechte Ecke. Wenn Sie sich Ihre Eingabe hier 60 00:05:06,070 --> 00:05:12,090 ansehen und in eine der Eingaben klicken, ist es diese Schaltfläche hier in der unteren rechten Ecke, die 61 00:05:12,090 --> 00:05:15,950 hier für die imageUrl zurücksendet. Beim Titel setze ich ihn auf "Weiter". 62 00:05:15,960 --> 00:05:21,870 Wenn Sie also in das Titelfeld klicken, wird hier "breiter" angezeigt. Dies ist Deutsch für "Weiter". Dies liegt nur daran, dass 63 00:05:21,870 --> 00:05:27,770 ich hier einen deutschen Emulator habe und diesen auch neu starten kann auf Android, weil es dort abgestürzt ist, damit ich 64 00:05:27,770 --> 00:05:29,660 es auch dort zeigen kann. 65 00:05:30,730 --> 00:05:36,280 Wenn wir dort zu unserer Eingabe gehen, klicken Sie in den Titel, Sie sehen diese nächste Schaltfläche 66 00:05:36,280 --> 00:05:41,080 hier, auf der imageUrl, Sie haben diese Schaltfläche hier und diese kann mit dem Rückgabetastentyp 67 00:05:41,080 --> 00:05:47,020 konfiguriert werden. Beachten Sie jedoch, dass dies nur steuert, wie Dies wird angezeigt, was dort steht, wie die Beschriftung 68 00:05:47,020 --> 00:05:49,150 dort ist oder welche Art von Schaltfläche 69 00:05:49,300 --> 00:05:55,150 angezeigt wird. Es ändert sich nicht automatisch, was diese Schaltfläche bewirkt. Wenn ich beispielsweise auf die breitere Schaltfläche klicke, 70 00:05:55,150 --> 00:05:56,200 wird diese 71 00:05:56,200 --> 00:05:59,990 Tastatur geschlossen. Dies gilt auch, wenn Ich klicke hier auf die Eingabetaste. 72 00:06:00,150 --> 00:06:05,040 Wenn wir nun über das Verhalten von Texteingaben sprechen, sind alle Ereignisse, die wir hören können, interessant. 73 00:06:05,340 --> 00:06:09,190 Mit on erhalten Sie eine Vorstellung von allen Ereignissen, die Sie anhören 74 00:06:09,210 --> 00:06:15,350 können, und dort haben Sie beispielsweise onBlur, das ausgelöst wird, wenn eine Eingabe den Fokus verliert. OnChange wird ausgelöst, also 75 00:06:15,420 --> 00:06:21,090 bei jedem Tastendruck und gibt Ihnen das vollständige Eingabeereignis, onChangeText, das ebenfalls ausgelöst wird Bei jedem Tastendruck erhalten 76 00:06:21,150 --> 00:06:25,230 Sie jedoch nur den eingegebenen Text, an dem Sie normalerweise mehr interessiert sind. 77 00:06:25,980 --> 00:06:35,000 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 78 00:06:35,010 --> 00:06:37,440 in der Konsole gedruckt wird. 79 00:06:37,440 --> 00:06:46,710 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 80 00:06:46,710 --> 00:06:49,350 es hier nicht ausgelöst hat, wenn ich 81 00:06:49,350 --> 00:06:54,930 darauf klicke, wird es jetzt auf EndEditing ausgelöst. Das Gleiche gilt, wenn ich hier zum Beispiel auf 82 00:06:54,930 --> 00:07:01,920 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 83 00:07:01,920 --> 00:07:03,890 auf die Schaltfläche "Fertig" klicken. 84 00:07:03,960 --> 00:07:10,620 Darüber hinaus haben wir auch andere Listener, wie zum Beispiel onFocus, das offensichtlich ausgelöst wird, wenn diese Eingabe 85 00:07:10,620 --> 00:07:19,640 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 86 00:07:19,640 --> 00:07:21,860 onSubmitEditing hier hinzufüge, wenn ich Fügen 87 00:07:21,860 --> 00:07:30,820 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 88 00:07:30,820 --> 00:07:37,820 ausgelöst wird, wenn ich hier rausklicke, es auch nicht ausgelöst wird, wir nur das onEndEditing erhalten Melden Sie 89 00:07:37,960 --> 00:07:39,130 sich hier 90 00:07:39,130 --> 00:07:45,600 an, aber es wird ausgelöst, wenn ich hier die breitere Taste drücke. Dort sehen Sie onSubmitEditing. Dies 91 00:07:45,610 --> 00:07:47,290 ist also ein Listener, 92 00:07:47,290 --> 00:07:52,870 den Sie abhören würden, wenn Sie auf die Eingabetaste klicken, und dann können Sie 93 00:07:52,870 --> 00:07:59,230 tun, was Sie wollen, wie z Daten oder verschieben Sie den Fokus automatisch auf die nächste 94 00:07:59,230 --> 00:08:03,090 Eingabe mit Hilfe von Referenzen, zum Beispiel, wenn Sie möchten. 95 00:08:03,200 --> 00:08:08,240 So können Sie dies konfigurieren, und wie gesagt, ich würde empfehlen, dass Sie sich damit befassen, 96 00:08:08,240 --> 00:08:10,370 um ein Gefühl dafür zu bekommen, 97 00:08:10,400 --> 00:08:16,160 wie dies funktioniert. Ich werde jetzt jedoch weitermachen und sicherstellen, dass wir nicht nur Eingaben anhören und speichern Sie 98 00:08:16,160 --> 00:08:19,460 die Werte, aber wir überprüfen auch, was der Benutzer eingibt.