1 00:00:02,390 --> 00:00:05,610 Schritt für Schritt machen wir also Fortschritte. 2 00:00:05,660 --> 00:00:08,150 Wir können keine Zahl eingeben. 3 00:00:08,150 --> 00:00:14,090 Technisch gesehen können wir eine Zahl eingeben, wenn wir das Eingabefeld finden. Hier ist es, aber es macht nicht viel Spaß, 4 00:00:14,090 --> 00:00:17,920 danach zu suchen. Es wäre schöner, wenn Sie es sehen könnten, nicht wahr? 5 00:00:18,680 --> 00:00:22,270 Lassen Sie uns also dieses Eingabefeld, dieses 6 00:00:22,280 --> 00:00:30,470 Texteingabefeld hier ein wenig stylen, und genau wie zuvor habe ich dies in einer separaten Komponente 7 00:00:30,470 --> 00:00:31,260 getan. 8 00:00:31,310 --> 00:00:40,520 Im Komponentenordner füge ich also meine eigene Eingabe hinzu. js-Datei und dort, wie immer, React from React importieren und dann 9 00:00:40,520 --> 00:00:46,580 Texteingabe von React Native importieren. Hier brauche ich die Ansicht eigentlich nicht, da wir hier 10 00:00:46,580 --> 00:00:51,970 nur die Texteingabe stilvoll und dort konfiguriert haben und dann die Eingabekonstante hier, 11 00:00:51,970 --> 00:00:59,880 die unsere Funktionskomponente ist, die wir am Ende natürlich auch exportieren, und eine Sache, die wir sicher brauchen werden, 12 00:00:59,880 --> 00:01:01,980 ist das Stylesheet, da dies 13 00:01:02,280 --> 00:01:08,550 jetzt hier so gestaltet werden sollte, dass wir einen Standardeingabe-Eingabe-Look haben, den wir hier wiederverwenden 14 00:01:08,550 --> 00:01:13,710 können Anwendung Wenn wir mehrere Eingaben an verschiedenen Orten benötigen und dies 15 00:01:13,710 --> 00:01:15,120 wirklich die 16 00:01:15,120 --> 00:01:20,130 Denkweise ist, in die Sie sich einarbeiten müssen, erstellen Sie wiederverwendbare Komponenten, 17 00:01:20,130 --> 00:01:26,460 damit Sie keinen Code kopieren oder sich wiederholen müssen, sondern Ihre Komponenten einfach freigeben und die 18 00:01:26,460 --> 00:01:32,700 Apps einfach erstellen können Sie möchten von Ihren Bausteinen, die Sie am Ende selbst erstellen. 19 00:01:32,700 --> 00:01:41,650 Also hier, meine Styles Objekt mit Stylesheet. So sieht create gut aus und jetzt möchte ich 20 00:01:41,710 --> 00:01:44,230 in dieser Komponente eine 21 00:01:44,230 --> 00:01:46,990 Texteingabe zurückgeben, also diese integrierte Texteingabe. 22 00:01:46,990 --> 00:01:49,830 Jetzt ist meine Idee natürlich, dass wir es von 23 00:01:49,870 --> 00:01:58,180 hier aus stylen können, also lasst uns einen Stil von dort zuweisen, aber genau wie bei der Karte wäre es schön, wenn wir auch ein Styling von außen 24 00:01:58,180 --> 00:02:05,200 einstellen könnten, wie eine spezielle Breite oder eine besondere Grenze, so etwas. Um dies zu ermöglichen, übergebe ich hier wieder 25 00:02:05,380 --> 00:02:08,050 ein Objekt an style und 26 00:02:08,050 --> 00:02:14,470 nehme zum einen alle meine Stile, die in meinem Stilobjekt eingerichtet sind, und dort sagen wir 27 00:02:14,470 --> 00:02:23,970 in einer Eingabeeigenschaft, die wir noch hinzufügen müssen, und füge zusätzlich auch alle Stile hinzu, die wir haben werden vom Requisitenstil verwendet, damit 28 00:02:23,970 --> 00:02:30,060 wir Stile auch von außen festlegen können. Jetzt können wir dort unten im Stylesheet 29 00:02:30,060 --> 00:02:37,180 den Eingabestil hinzufügen, um der Eingabe einen Stil zuzuweisen. Hier könnten wir also eine Höhe von beispielsweise 30 angeben, 30 00:02:37,180 --> 00:02:43,420 was eine Höhe sein sollte, die relativ gut aussieht. Um etwas zu sehen, möchte ich auch unten einen Rand hinzufügen. 31 00:02:43,450 --> 00:02:49,120 Sie können auch einen Rahmen um die gesamte Eingabe mit Rahmenfarbe und Rahmenbreite usw. hinzufügen, aber ich mag 32 00:02:49,310 --> 00:02:54,970 diesen Look, bei dem wir nur einen Rahmen unter der Eingabe haben, aber das ist natürlich völlig 33 00:02:55,060 --> 00:02:59,120 subjektiv und etwas, das Sie nach Ihren persönlichen Vorlieben einrichten können . 34 00:02:59,250 --> 00:03:06,160 Ein Rand am unteren Rand kann nur mit der unteren Randfarbe festgelegt werden, und dort werde ich mit 35 00:03:06,160 --> 00:03:16,110 Grau arbeiten, einer anderen vorgefertigten Farbe, die wir mit dieser Verknüpfung verwenden können, und diesem Rand unten auch eine Breite von eins geben. Fügen Sie 36 00:03:16,110 --> 00:03:22,680 einen vertikalen Rand hinzu von 10, um einen gewissen Abstand um die Eingabe zu haben, zumindest 37 00:03:22,890 --> 00:03:26,380 nach oben und unten, und jetzt ist damit 38 00:03:26,400 --> 00:03:28,170 das Basis-Styling für diese 39 00:03:28,170 --> 00:03:36,660 Texteingabe fertig. Lassen Sie uns dies jetzt auf dem Spielbildschirm verwenden. Dort möchte ich also meine eigene Eingabe aus der 40 00:03:36,660 --> 00:03:39,890 Eingabe des Komponentenordners importieren und diese Texteingabe 41 00:03:40,930 --> 00:03:46,690 hier durch meine eigene Eingabe ersetzen, die am Ende natürlich diese integrierte Texteingabe 42 00:03:46,690 --> 00:03:47,440 umschließt. 43 00:03:47,500 --> 00:03:48,510 Verwenden Sie 44 00:03:48,510 --> 00:03:52,300 also meine eigene Eingabe, entfernen Sie die Texteingabe dort oben, die wir 45 00:03:52,600 --> 00:03:59,370 nicht mehr benötigen, und jetzt, wenn wir diese speichern, sehen wir sie ein wenig, aber sie ist sehr klein. Sie können sie 46 00:03:59,410 --> 00:04:04,600 hier auf iOS und dort kaum sehen wird beim Tippen jedoch größer, was wir natürlich nicht wollen. 47 00:04:04,900 --> 00:04:06,590 Wir sind natürlich noch nicht 48 00:04:07,200 --> 00:04:09,290 fertig, stattdessen gehe ich zum Stylen der 49 00:04:09,300 --> 00:04:10,950 Breite zum Startbildschirm, also zu 50 00:04:10,980 --> 00:04:14,460 dem Ort, an dem wir die Eingabe verwenden, und richte das 51 00:04:14,460 --> 00:04:19,200 Styling hier ein, weil es für mich sinnvoll ist, dass wir einige allgemeine haben Stile, die 52 00:04:19,380 --> 00:04:24,720 wir immer in der Eingabekomponente haben möchten, etwa die Höhe oder den Rand, aber einige bestimmte Stile, wie 53 00:04:24,720 --> 00:04:25,230 z. 54 00:04:25,350 --> 00:04:28,480 B. wie groß sie sein sollen, wie breit sie sein 55 00:04:28,650 --> 00:04:36,150 sollen, möchten Sie an der Stelle einrichten, an der Sie sie tatsächlich verwenden Daher füge ich hier diese Eingabeeigenschaft in das Stylesheet-Objekt des Startspielbildschirms ein 56 00:04:36,150 --> 00:04:42,360 und verwende hier möglicherweise eine Breite von 50 Pixel, die gut aussehen sollte, und ordne dies meiner benutzerdefinierten Eingabe hier 57 00:04:42,450 --> 00:04:43,760 mit der Stil-Requisite zu. 58 00:04:43,830 --> 00:04:51,840 Dort können wir nun auf Stile verweisen. Eingabe und damit wird es immer diese Breite haben und 59 00:04:51,840 --> 00:04:55,380 wenn wir dort tippen, machen wir das nicht 60 00:04:55,380 --> 00:05:00,040 mehr breiter, stattdessen können wir dann einfach automatisch in dieser Eingabe scrollen. 61 00:05:00,150 --> 00:05:05,760 Für diese spezielle Eingabe, für dieses spezielle Layout hier, wäre es auch schön, wenn der Text 62 00:05:05,760 --> 00:05:06,500 zentriert 63 00:05:06,600 --> 00:05:12,330 wäre, denke ich. Für die meisten Eingaben möchten Sie das Standardverhalten, von links nach rechts zu schreiben 64 00:05:12,330 --> 00:05:13,220 und am linken 65 00:05:13,260 --> 00:05:20,480 Rand zu beginnen, aber hier denke ich Ein zentrierter Text wäre schön und daher können wir auf dem Startbildschirm, auf dem 66 00:05:20,480 --> 00:05:23,550 ich diese Zentrierung hier haben möchte, bei dieser Eingabe 67 00:05:23,660 --> 00:05:30,470 auch die Eigenschaft "Text ausrichten" hinzufügen und auf "Zentrieren" setzen. Jetzt wird dieser Text hier in der Mitte als zentriert 68 00:05:30,470 --> 00:05:32,330 wir tippen und das ist 69 00:05:32,330 --> 00:05:35,830 wirklich schön, wenn man dann einfach so eine Zahl eingibt. 70 00:05:36,920 --> 00:05:40,260 Apropos, im Moment können wir dort alles eingeben, 71 00:05:40,550 --> 00:05:45,980 also müssen wir diese Eingabe auf jeden Fall konfigurieren. Wenn ich zu der Eingabekomponente 72 00:05:45,980 --> 00:05:52,250 gehe, in der wir die Texteingabe verwenden, können wir dort und tatsächlich eine Menge Dinge konfigurieren 73 00:05:52,250 --> 00:05:59,030 Die beste Ressource ist natürlich immer die offizielle Dokumentation. Wenn Sie dort in den API-Dokumenten nach der Texteingabe suchen, 74 00:05:59,030 --> 00:06:05,990 finden Sie nicht nur eine Erklärung, sondern auch alle Requisiten, die Sie dort einstellen können, und Sie können festlegen, ob 75 00:06:06,320 --> 00:06:09,230 es mehrzeilig ist oder nicht , wie lang 76 00:06:09,230 --> 00:06:11,100 darf der Text sein. 77 00:06:11,330 --> 00:06:13,730 Sie können auch einen Platzhaltertext 78 00:06:13,730 --> 00:06:18,700 festlegen, die Autokorrektur und all das lustige Zeug festlegen. Überprüfen Sie daher auf 79 00:06:18,770 --> 00:06:25,670 jeden Fall diese Dokumente, um die spezifische Eigenschaft zu finden, die Sie möglicherweise für Ihren Anwendungsfall benötigen. 80 00:06:25,730 --> 00:06:31,970 Ich möchte diese Requisiten einstellen können, aber ich möchte sie von der Stelle aus einstellen können, 81 00:06:31,970 --> 00:06:37,640 an der ich meine benutzerdefinierten Eingaben verwende. Also nicht von hier aus, da dies sicherstellen würde, dass 82 00:06:37,730 --> 00:06:40,150 wir für alle Eingaben, die wir möglicherweise 83 00:06:40,430 --> 00:06:46,550 in unserer App haben, dieselbe Konfiguration verwenden. Ich möchte mehr Flexibilität haben und hier einfach ein Basis-Styling einrichten und die Eingabe 84 00:06:46,550 --> 00:06:51,440 an der Stelle konfigurieren, an der wir uns befinden Verwenden Sie es dann anstelle der Core-Wrapper-Komponente. 85 00:06:51,440 --> 00:06:57,140 Das Coole ist React und das ist nicht React Native, das ist nur React in normalem Javascript hat 86 00:06:57,140 --> 00:06:58,200 eine Syntax dafür. 87 00:06:58,460 --> 00:07:05,920 Sie können Ihre Requisiten, die Sie erhalten, so auf Ihre Komponente verteilen. 88 00:07:05,920 --> 00:07:11,110 Die Syntax mag etwas seltsam aussehen, aber am Ende werden alle Requisiten, 89 00:07:11,140 --> 00:07:19,120 die Sie haben, alle Requisiten, die Sie hier eingestellt haben, und im Grunde genommen als Requisiten zu Ihrer Komponente hinzugefügt. 90 00:07:19,150 --> 00:07:23,600 Wenn Sie danach andere Requisiten wie "Stil" definieren und hier bereits einen Stil haben, 91 00:07:23,650 --> 00:07:26,020 überschreibt dieser Stil den Stil, den Sie 92 00:07:26,040 --> 00:07:31,210 hier haben, und genau das möchte ich, denn wenn ich eine Stil-Requisite auf meine eigene Eingabe von 93 00:07:31,210 --> 00:07:37,450 außen setze, bin ich es definitiv Ich möchte dies mit dieser Stil-Requisite überschreiben und dieses Styling, das dort unten eingerichtet 94 00:07:37,450 --> 00:07:38,200 ist, zu 95 00:07:38,200 --> 00:07:43,630 dieser Texteingabe hinzufügen. Wenn Sie jedoch andere Requisiten außerhalb dieser Komponente festlegen, also auf meiner benutzerdefinierten Komponente, 96 00:07:43,630 --> 00:07:49,010 werden diese zur Texteingabe hinzugefügt ermöglicht es uns, alle Requisiten, die wir zur Texteingabe hinzufügen können, auch 97 00:07:49,120 --> 00:07:52,120 zu unserer Eingabe hinzuzufügen, also zu unserer eigenen Komponente. 98 00:07:52,120 --> 00:08:03,400 Hier, wo wir Eingaben verwenden, können wir jetzt nicht nur den Stil hinzufügen, sondern auch blurOnSubmit hinzufügen, um 99 00:08:03,400 --> 00:08:09,670 beispielsweise sicherzustellen, dass wir beim Drücken der Senden-Taste den Fokus 100 00:08:09,670 --> 00:08:16,430 verlieren und die Softtastatur schließen. Wir können die automatische Kapitalisierung auf keine setzen, was einer der dort zulässigen Werte 101 00:08:16,480 --> 00:08:20,040 ist, wenn Sie die Dokumente überprüfen. Sie können es auf keine, Sätze, 102 00:08:20,050 --> 00:08:24,610 Wörter usw. setzen, daher möchte ich hier keine Großschreibung aktivieren, da wir nur die Zahl eingeben, sondern auch, 103 00:08:24,610 --> 00:08:30,610 weil ich Ihnen verschiedene Konfigurationen zeigen möchte, die Sie einstellen können. Ich werde die Autokorrektur hier auf false 104 00:08:30,610 --> 00:08:35,050 setzen, damit wir die Benutzereingaben nicht automatisch korrigieren. Sehr wichtig ist 105 00:08:35,080 --> 00:08:41,000 hier, dass ich den Tastaturtyp auf numerisch setze, damit der Benutzer hier eine Zahl eingeben muss. 106 00:08:41,320 --> 00:08:47,590 Ich werde die maximale Länge hier auf 2 setzen, damit Sie nur zwei Ziffern und keine sehr lange Zahl eingeben können, 107 00:08:47,620 --> 00:08:53,890 da dieses Spiel hier und es nur eine der Einschränkungen ist, die ich hier habe, ist, dass dieses Spiel nur mit 108 00:08:53,890 --> 00:08:57,140 einer zweistelligen Zahl funktioniert Nummer. Wenn wir jetzt zurückgehen 109 00:08:57,140 --> 00:09:02,990 und ich meine Softtastatur umschalte, sehen Sie, dass Sie diese Zifferntastatur hier bekommen und Sie können 110 00:09:02,990 --> 00:09:09,180 dort nur zwei Ziffern eingeben und nicht mehr als das, was natürlich genau das ist, was ich will. 111 00:09:09,260 --> 00:09:14,170 Außerdem sehen wir hier auf Android Folgendes: Wenn Sie auf die Schaltfläche "Bestätigen" klicken, wird 112 00:09:14,180 --> 00:09:21,140 es geschlossen. Dies ist der Sache mit "blurOnSubmit" zu verdanken. Unter iOS gibt es eine solche Schaltfläche hier nicht. Daher müssen wir tatsächlich 113 00:09:21,140 --> 00:09:25,730 eine andere Lösung finden, um diese zu schließen, wenn Sie beispielsweise auf eine andere Stelle tippen, da dies 114 00:09:25,760 --> 00:09:27,150 derzeit nicht der Fall ist. 115 00:09:27,320 --> 00:09:32,090 Aber das Gute ist, wir haben jetzt eine Tastatur, die wir sehen können, und eine Tastatur, auf der wir Zahlen eingeben können. 116 00:09:32,090 --> 00:09:37,910 Eine Sache, die ich jedoch ändern möchte, ist, dass ich jetzt hier auch ein Dezimaltrennzeichen eingeben kann. 117 00:09:37,910 --> 00:09:44,420 Um dies zu beseitigen, können Sie den Tastaturtyp in einen Ziffernblock ändern und alle verfügbaren Tastaturtypen anzeigen, da immer die offiziellen Dokumente 118 00:09:44,420 --> 00:09:49,650 der richtige Ort sind. Dort können Sie für die Texteingabe in einen Tastaturtyp eintauchen und suchen Finden Sie 119 00:09:49,650 --> 00:09:54,650 heraus, was Sie einstellen können, was auf allen Plattformen funktioniert und was Sie einstellen könnten, wenn 120 00:09:54,650 --> 00:09:59,480 Sie überprüfen würden, auf welcher Plattform Sie den Code ausführen, von dem wir noch nichts erfahren 121 00:09:59,480 --> 00:09:59,990 haben. 122 00:10:00,230 --> 00:10:03,200 Der Nummernblock wird jedoch auf beiden Plattformen unterstützt. Wenn Sie 123 00:10:03,350 --> 00:10:08,380 dies festlegen, haben Sie jetzt eine Eingabe, bei der Sie hier keine Dezimalstelle eingeben können, wenn Sie 124 00:10:08,390 --> 00:10:13,990 hier eingeben und dies unter iOS nicht möglich ist. Auf Android ist das leider möglich, daher müssen wir 125 00:10:14,090 --> 00:10:16,490 dort auch einen anderen Fix finden.