Nachdem wir nun eine Kopfzeile erhalten
haben, können wir mit dem Teil fortfahren, in dem Benutzer eine Nummer eingeben können, die der
Computer danach erraten sollte. Und dafür hier in der App. js Datei, unter dem
Header, möchte ich natürlich den Eingabebereich des Benutzers haben. Nach wie vor werde ich dies in einer
separaten Komponente und nicht hier in der App behandeln. js alle Komponenten relativ schlank zu halten und wir könnten
diese Komponente hier im Komponentenordner erstellen, das wäre nicht falsch, aber da ich jetzt an
einer Komponente arbeiten werde, die im Wesentlichen für alles verantwortlich ist, was wir auf dem Bildschirm außer dem Header sehen, behandle ich
Diese Komponente als eine Art spezielle Komponente, ich werde sie als Bildschirm bezeichnen und in einem Bildschirmordner
speichern, da das fertige Spiel im Wesentlichen drei verschiedene Bildschirme hat - einen zum Konfigurieren und
Starten des Spiels, einen, wenn das Spiel läuft Laufen und eine, wenn das Spiel vorbei
ist und ich diese speziellen Komponenten haben möchte, die technisch völlig normale Komponenten sind, aber einen besonderen Zweck erfüllen.
Ich möchte, dass sie in einem separaten Ordner gespeichert werden, und das ist nur meine persönliche Designentscheidung, das
tun Sie nicht Ich muss sie nicht aufbewahren. Technisch gibt es keinen Grund, es zu tun oder nicht zu
tun, React Native ist es einfach egal.
Also werde ich es hier speichern und diesen StartGameScreen nennen. js um auch im Namen wirklich klar
zu machen, dass dies eine spezielle Komponente für mich ist, aber wie gesagt, technisch gesehen ist es eine normale
Komponente und deshalb importieren wir React von React und wir importieren natürlich auch einige Dinge von React Native und wir
Ich kann bereits sagen, dass wir sicherlich eine Ansicht benötigen, da Sie wahrscheinlich keine Komponente erstellen können. Nun,
Sie können aber nicht so viele Komponenten, die Sie ohne Ansichten erstellen können.
Also werden wir die Ansicht hier importieren und wir werden definitiv auch ein Stylesheet für ein Styling brauchen und wir werden sehen, was wir
sonst noch brauchen. Wir werden sicherlich auch einen Text brauchen, denke ich, damit wir das bereits hinzufügen können. Jetzt erstelle ich hier eine neue
Konstante und starte den Spielbildschirm, eine funktionale Komponente, die so aussieht.
Dort haben wir ein Styles-Objekt mit Stylesheet. Erstellen Sie, so und wo ich dann den Startbildschirm so exportiere, und Sie können
dies als eine Art Vorlage für jede neue Komponente speichern, die Sie hinzufügen, da 90% der benutzerdefinierten Komponenten, die Sie in React Native erstellen, im
Grunde so aussehen: Sie importieren React, Sie importieren einige Dinge aus React Native, Sie definieren Ihre Komponente,
der Name unterscheidet sich natürlich, Sie haben Ihr Stilobjekt und Sie exportieren es, das ist so ziemlich immer das
gleiche, so dass
Sie dies als Vorlage speichern können, wenn Sie möchten. Ich möchte hier jedoch nicht, also werde
ich einfach weiter an der Komponente selbst arbeiten und die Frage ist nun, was
wir in diesem Startspielbildschirm rendern. Wie soll es aussehen? Am Ende werde ich eine
Wrap-Ansicht haben, die meinen gesamten Bildschirm umgibt, da ich denke, dass diese Art von Sinn macht
und es uns ermöglicht, ein allgemeines Styling einzurichten. Ich werde diesem Stylesheet-Objekt hier erneut eine Bildschirmeigenschaft hinzufügen, die ich ausführen kann. Sie
wird nicht mit der in der App kollidieren. js, wir hätten auch unterschiedliche
Namen wählen können, diese beiden sind einfach nicht miteinander verbunden, da es sich letztendlich um
unabhängige Javascript-Objekte handelt, die in unabhängigen Dateien verwaltet werden. Damit wir hier Namen wiederholen oder andere Namen auswählen können, werde ich hier einen
ähnlichen Namen wählen, diesen Bildschirm benennen und hier ein allgemeines Styling für diese umgebende Ansicht einrichten. Das allgemeine Styling ist, dass ich dies gesagt habe, um
eins so zu biegen, dass es den gesamten Platz einnimmt, den es bekommen kann, was bedeutet, dass es, da ich
es unter der Kopfzeile hinzufüge, den gesamten Raum unter der Kopfzeile sowohl vertikal als auch
horizontal und darüber hinaus einnimmt Ich möchte hier auch eine Auffüllung von 10 hinzufügen, damit der Inhalt nicht direkt an
den Rändern dieses Bildschirms angezeigt wird, aber links, rechts, oben und unten ein gewisser Abstand besteht, und ich
füge die Mitte der Ausrichtungselemente hinzu.
Beachten Sie, dass in jeder Ansicht standardmäßig die Flexbox und standardmäßig die Flexrichtungsspalte verwendet wird. Richten Sie
die Elemente so aus, dass die Elemente entlang der Querachse
positioniert werden. Da die Standardrichtung also die Spalte ist, ist die Querachse
von links nach rechts,
also eine horizontale Achse. Dadurch werden Elemente in der Mitte horizontal, aber nicht vertikal ausgerichtet.
Dort verwenden wir die Standardeinstellung von adjustContent flex start, aber da ich
die Standardeinstellung verwende, muss ich sie nicht festlegen. Also lassen wir es einfach so wie es hier ist und weisen diesen Stil jetzt dieser Ansicht zu und die
automatische Formatierung hat mein Tag hier geschlossen, was ich natürlich nicht tun
möchte. Lassen Sie mich dies
zurücksetzen und jetzt haben wir diese Ansicht für unsere Spielbildschirm. Um zu sehen, ob es
funktioniert, gebe ich hier nur einen
Text aus, den Spielbildschirm, nur einen Dummy-Platzhalter. Formatieren Sie das neu und jetzt in App. js, verwenden
wir diesen Bildschirm, indem wir den Startspielbildschirm aus dem Bildschirmordner importieren und
dort den Spielbildschirm starten
und ihn dann einfach hier hinzufügen. Wenn wir dies speichern, sehen wir den Spielbildschirm hier und auch auf Android, so dass dies
funktioniert.
Wir verwenden diese zweite separate Komponente, die wir jetzt im Grunde genommen als Vollbildkomponente oder fast als Vollbild verwenden,
den Teil
unter der Kopfzeile am Ende.