Schritt für Schritt machen wir also Fortschritte.
Wir können keine Zahl eingeben.
Technisch gesehen können wir eine Zahl eingeben, wenn wir das Eingabefeld finden. Hier ist es, aber es macht nicht viel Spaß,
danach zu suchen. Es wäre schöner, wenn Sie es sehen könnten, nicht wahr?
Lassen Sie uns also dieses Eingabefeld, dieses
Texteingabefeld hier ein wenig stylen, und genau wie zuvor habe ich dies in einer separaten Komponente
getan.
Im Komponentenordner füge ich also meine eigene Eingabe hinzu. js-Datei und dort, wie immer, React from React importieren und dann
Texteingabe von React Native importieren. Hier brauche ich die Ansicht eigentlich nicht, da wir hier
nur die Texteingabe stilvoll und dort konfiguriert haben und dann die Eingabekonstante hier,
die unsere Funktionskomponente ist, die wir am Ende natürlich auch exportieren, und eine Sache, die wir sicher brauchen werden,
ist das Stylesheet, da dies
jetzt hier so gestaltet werden sollte, dass wir einen Standardeingabe-Eingabe-Look haben, den wir hier wiederverwenden
können Anwendung Wenn wir mehrere Eingaben an verschiedenen Orten benötigen und dies
wirklich die
Denkweise ist, in die Sie sich einarbeiten müssen, erstellen Sie wiederverwendbare Komponenten,
damit Sie keinen Code kopieren oder sich wiederholen müssen, sondern Ihre Komponenten einfach freigeben und die
Apps einfach erstellen können Sie möchten von Ihren Bausteinen, die Sie am Ende selbst erstellen.
Also hier, meine Styles Objekt mit Stylesheet. So sieht create gut aus und jetzt möchte ich
in dieser Komponente eine
Texteingabe zurückgeben, also diese integrierte Texteingabe.
Jetzt ist meine Idee natürlich, dass wir es von
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
einstellen könnten, wie eine spezielle Breite oder eine besondere Grenze, so etwas. Um dies zu ermöglichen, übergebe ich hier wieder
ein Objekt an style und
nehme zum einen alle meine Stile, die in meinem Stilobjekt eingerichtet sind, und dort sagen wir
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
wir Stile auch von außen festlegen können. Jetzt können wir dort unten im Stylesheet
den Eingabestil hinzufügen, um der Eingabe einen Stil zuzuweisen. Hier könnten wir also eine Höhe von beispielsweise 30 angeben,
was eine Höhe sein sollte, die relativ gut aussieht. Um etwas zu sehen, möchte ich auch unten einen Rand hinzufügen.
Sie können auch einen Rahmen um die gesamte Eingabe mit Rahmenfarbe und Rahmenbreite usw. hinzufügen, aber ich mag
diesen Look, bei dem wir nur einen Rahmen unter der Eingabe haben, aber das ist natürlich völlig
subjektiv und etwas, das Sie nach Ihren persönlichen Vorlieben einrichten können .
Ein Rand am unteren Rand kann nur mit der unteren Randfarbe festgelegt werden, und dort werde ich mit
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
einen vertikalen Rand hinzu von 10, um einen gewissen Abstand um die Eingabe zu haben, zumindest
nach oben und unten, und jetzt ist damit
das Basis-Styling für diese
Texteingabe fertig. Lassen Sie uns dies jetzt auf dem Spielbildschirm verwenden. Dort möchte ich also meine eigene Eingabe aus der
Eingabe des Komponentenordners importieren und diese Texteingabe
hier durch meine eigene Eingabe ersetzen, die am Ende natürlich diese integrierte Texteingabe
umschließt.
Verwenden Sie
also meine eigene Eingabe, entfernen Sie die Texteingabe dort oben, die wir
nicht mehr benötigen, und jetzt, wenn wir diese speichern, sehen wir sie ein wenig, aber sie ist sehr klein. Sie können sie
hier auf iOS und dort kaum sehen wird beim Tippen jedoch größer, was wir natürlich nicht wollen.
Wir sind natürlich noch nicht
fertig, stattdessen gehe ich zum Stylen der
Breite zum Startbildschirm, also zu
dem Ort, an dem wir die Eingabe verwenden, und richte das
Styling hier ein, weil es für mich sinnvoll ist, dass wir einige allgemeine haben Stile, die
wir immer in der Eingabekomponente haben möchten, etwa die Höhe oder den Rand, aber einige bestimmte Stile, wie
z.
B. wie groß sie sein sollen, wie breit sie sein
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
und verwende hier möglicherweise eine Breite von 50 Pixel, die gut aussehen sollte, und ordne dies meiner benutzerdefinierten Eingabe hier
mit der Stil-Requisite zu.
Dort können wir nun auf Stile verweisen. Eingabe und damit wird es immer diese Breite haben und
wenn wir dort tippen, machen wir das nicht
mehr breiter, stattdessen können wir dann einfach automatisch in dieser Eingabe scrollen.
Für diese spezielle Eingabe, für dieses spezielle Layout hier, wäre es auch schön, wenn der Text
zentriert
wäre, denke ich. Für die meisten Eingaben möchten Sie das Standardverhalten, von links nach rechts zu schreiben
und am linken
Rand zu beginnen, aber hier denke ich Ein zentrierter Text wäre schön und daher können wir auf dem Startbildschirm, auf dem
ich diese Zentrierung hier haben möchte, bei dieser Eingabe
auch die Eigenschaft "Text ausrichten" hinzufügen und auf "Zentrieren" setzen. Jetzt wird dieser Text hier in der Mitte als zentriert
wir tippen und das ist
wirklich schön, wenn man dann einfach so eine Zahl eingibt.
Apropos, im Moment können wir dort alles eingeben,
also müssen wir diese Eingabe auf jeden Fall konfigurieren. Wenn ich zu der Eingabekomponente
gehe, in der wir die Texteingabe verwenden, können wir dort und tatsächlich eine Menge Dinge konfigurieren
Die beste Ressource ist natürlich immer die offizielle Dokumentation. Wenn Sie dort in den API-Dokumenten nach der Texteingabe suchen,
finden Sie nicht nur eine Erklärung, sondern auch alle Requisiten, die Sie dort einstellen können, und Sie können festlegen, ob
es mehrzeilig ist oder nicht , wie lang
darf der Text sein.
Sie können auch einen Platzhaltertext
festlegen, die Autokorrektur und all das lustige Zeug festlegen. Überprüfen Sie daher auf
jeden Fall diese Dokumente, um die spezifische Eigenschaft zu finden, die Sie möglicherweise für Ihren Anwendungsfall benötigen.
Ich möchte diese Requisiten einstellen können, aber ich möchte sie von der Stelle aus einstellen können,
an der ich meine benutzerdefinierten Eingaben verwende. Also nicht von hier aus, da dies sicherstellen würde, dass
wir für alle Eingaben, die wir möglicherweise
in unserer App haben, dieselbe Konfiguration verwenden. Ich möchte mehr Flexibilität haben und hier einfach ein Basis-Styling einrichten und die Eingabe
an der Stelle konfigurieren, an der wir uns befinden Verwenden Sie es dann anstelle der Core-Wrapper-Komponente.
Das Coole ist React und das ist nicht React Native, das ist nur React in normalem Javascript hat
eine Syntax dafür.
Sie können Ihre Requisiten, die Sie erhalten, so auf Ihre Komponente verteilen.
Die Syntax mag etwas seltsam aussehen, aber am Ende werden alle Requisiten,
die Sie haben, alle Requisiten, die Sie hier eingestellt haben, und im Grunde genommen als Requisiten zu Ihrer Komponente hinzugefügt.
Wenn Sie danach andere Requisiten wie "Stil" definieren und hier bereits einen Stil haben,
überschreibt dieser Stil den Stil, den Sie
hier haben, und genau das möchte ich, denn wenn ich eine Stil-Requisite auf meine eigene Eingabe von
außen setze, bin ich es definitiv Ich möchte dies mit dieser Stil-Requisite überschreiben und dieses Styling, das dort unten eingerichtet
ist, zu
dieser Texteingabe hinzufügen. Wenn Sie jedoch andere Requisiten außerhalb dieser Komponente festlegen, also auf meiner benutzerdefinierten Komponente,
werden diese zur Texteingabe hinzugefügt ermöglicht es uns, alle Requisiten, die wir zur Texteingabe hinzufügen können, auch
zu unserer Eingabe hinzuzufügen, also zu unserer eigenen Komponente.
Hier, wo wir Eingaben verwenden, können wir jetzt nicht nur den Stil hinzufügen, sondern auch blurOnSubmit hinzufügen, um
beispielsweise sicherzustellen, dass wir beim Drücken der Senden-Taste den Fokus
verlieren und die Softtastatur schließen. Wir können die automatische Kapitalisierung auf keine setzen, was einer der dort zulässigen Werte
ist, wenn Sie die Dokumente überprüfen. Sie können es auf keine, Sätze,
Wörter usw. setzen, daher möchte ich hier keine Großschreibung aktivieren, da wir nur die Zahl eingeben, sondern auch,
weil ich Ihnen verschiedene Konfigurationen zeigen möchte, die Sie einstellen können. Ich werde die Autokorrektur hier auf false
setzen, damit wir die Benutzereingaben nicht automatisch korrigieren. Sehr wichtig ist
hier, dass ich den Tastaturtyp auf numerisch setze, damit der Benutzer hier eine Zahl eingeben muss.
Ich werde die maximale Länge hier auf 2 setzen, damit Sie nur zwei Ziffern und keine sehr lange Zahl eingeben können,
da dieses Spiel hier und es nur eine der Einschränkungen ist, die ich hier habe, ist, dass dieses Spiel nur mit
einer zweistelligen Zahl funktioniert Nummer. Wenn wir jetzt zurückgehen
und ich meine Softtastatur umschalte, sehen Sie, dass Sie diese Zifferntastatur hier bekommen und Sie können
dort nur zwei Ziffern eingeben und nicht mehr als das, was natürlich genau das ist, was ich will.
Außerdem sehen wir hier auf Android Folgendes: Wenn Sie auf die Schaltfläche "Bestätigen" klicken, wird
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
eine andere Lösung finden, um diese zu schließen, wenn Sie beispielsweise auf eine andere Stelle tippen, da dies
derzeit nicht der Fall ist.
Aber das Gute ist, wir haben jetzt eine Tastatur, die wir sehen können, und eine Tastatur, auf der wir Zahlen eingeben können.
Eine Sache, die ich jedoch ändern möchte, ist, dass ich jetzt hier auch ein Dezimaltrennzeichen eingeben kann.
Um dies zu beseitigen, können Sie den Tastaturtyp in einen Ziffernblock ändern und alle verfügbaren Tastaturtypen anzeigen, da immer die offiziellen Dokumente
der richtige Ort sind. Dort können Sie für die Texteingabe in einen Tastaturtyp eintauchen und suchen Finden Sie
heraus, was Sie einstellen können, was auf allen Plattformen funktioniert und was Sie einstellen könnten, wenn
Sie überprüfen würden, auf welcher Plattform Sie den Code ausführen, von dem wir noch nichts erfahren
haben.
Der Nummernblock wird jedoch auf beiden Plattformen unterstützt. Wenn Sie
dies festlegen, haben Sie jetzt eine Eingabe, bei der Sie hier keine Dezimalstelle eingeben können, wenn Sie
hier eingeben und dies unter iOS nicht möglich ist. Auf Android ist das leider möglich, daher müssen wir
dort auch einen anderen Fix finden.