Es liegt natürlich an Ihnen, wie Sie diesen Bestätigungstext hier formatieren möchten oder eigentlich nicht nur Text sein
sollten, sondern eine Ansicht mit dem darin enthaltenen Text, der unsere Nummer ausgibt, und dann eine Schaltfläche zum Starten des Spiels,
und Sie können definitiv pausieren das Video an dieser Stelle und überlegen Sie sich dort Ihr eigenes Styling,
Ihr eigenes Layout.
Ich habe ein bestimmtes Layout im Sinn, das sich sicherlich von Ihrem unterscheiden wird, aber
es gibt hier keine falsche oder richtige Entscheidung. Nehmen Sie dies also definitiv als eine weitere Chance,
Ihr eigenes Layout dafür zu erstellen, und eine Schaltfläche, die im Moment nichts bewirkt Aber das
ist da, damit der Benutzer das Spiel starten kann. Nach einer kurzen Pause, mit der Sie das Video anhalten
können, werde ich meine Lösung zusammen mit Ihnen implementieren.
Also hier ist, wie ich denke, dass dies schön aussehen würde.
Ich möchte eine Ansicht haben, damit ich einen allgemeinen Container darum herum einrichten kann oder vielleicht keine Ansicht, aber warum
verwenden wir unsere Karte hier nicht, das
klingt nach einer guten Idee.
Nun, diese Karte hat, wenn wir sie uns ansehen, keinen Rand und ich möchte einen gewissen
Abstand zwischen dieser Karte oben und meiner Übersichtskarte haben.
Deshalb gebe ich hier hier in meinem Stylesheet einen separaten Stil, im Startspielbildschirm benenne ich diesen Zusammenfassungscontainer,
der Name liegt wie immer bei Ihnen und ich möchte einen Rand nach
oben haben Sagen Sie 20, einige schöne Abstände hier und fügen Sie diese über die Stil-Requisite der Karte hier und da hinzu. Ich möchte sagen, Sie haben ausgewählt und dann in
einer neuen Zeile die Nummer auf eine schön präsentierte Weise ausgegeben, vielleicht die Nummer in einer Art a Feld mit einem
separaten Rand mit abgerundeten Ecken, so dass es deutlich sichtbar oder auch größer als
der andere Text ist. Daher füge ich hier eine Ansicht mit einem
Text hinzu und in diesem Text habe ich die ausgewählte Nummer, aber jetzt das Die Ansicht
und der Text sollten ein spezielles Design erhalten. Da ich beabsichtige, das wiederzuverwenden, werde
ich es tatsächlich
greifen und in eine neue Komponente auslagern und es als Nummerncontainer bezeichnen. In dieser Komponente importiere ich React from React und importiere Ansicht und Text von
React Native und habe dann die Nummerncontainerkomponente hier, exportiere den Standardnummerncontainer und natürlich benötigen wir hier auch ein Stylesheet, also
richten wir ein Stylesheet ein auch mit Stylesheet. dort unten erstellen und dann in dieser Komponente werde
ich diese Ansicht hier mit der ausgewählten Nummer zurückgeben, die jetzt jedoch übergeben werden muss, und ich
erwarte, dass sie mit Hilfe von zwischen den öffnenden und schließenden Tags meiner eigenen
Komponente verschoben wird Requisiten Kinder.
Jetzt können Sie diesen Container natürlich frei konfigurieren.
Ich füge hier nur einen Containerstil und einen Containernamen hinzu, bei dem ich denke, dass eine Randbreite von
zwei gut aussehen könnte, also ein bisschen breiter, breiter. Bei einer Rahmenfarbe, bei der ich meine Primärfarbe oder meine Akzentfarbe verwenden
möchte, werden wir sehen, welche besser aussieht.
Importieren wir also Farben aus Konstanten / Farben und für die Rahmenfarbe. Verwenden Sie dann zunächst den Farbakzent und
sehen Sie, wie das aussieht. Einige Polsterungen, so dass sich die Zahl
nicht direkt an den Rändern des
umgebenden Felds befindet, sitzen nicht direkt neben dem Rand, ein Randradius von 10, um einige abgerundete Ränder zu haben,
einige
abgerundete Ecken entschuldigen mich übrigens, wenn Sie möchten Wenn Sie einzelne Ecken als Ziel festlegen möchten,
können Sie dies mit dem oberen linken Radius, dem oberen rechten Radius, dem oberen Ende und dem oberen Start tun. Dabei werden auch die
Einstellungen des Benutzers berücksichtigt, ob es sich um eine Sprache von links nach rechts oder von rechts
nach links handelt, sodass Sie alle einzelnen Elemente als Ziel festlegen können Ecken auch oder setzen Sie einen Radius für alle Ecken
mit Randradius und fügen Sie hier auch einen kleinen Rand hinzu, Rand vertikal von 10, um hier einen gewissen Abstand zum oberen
und unteren Rand dieses Containers zu haben und auch wichtig, zentrieren Sie den Text dort Wenn Sie die Elementmitte ausrichten
und das Inhaltscenter ausrichten, wird das Verhalten der Flexbox ausgenutzt. Und damit möchte ich auch die Zahl selbst geben, so dass der Text einen
bestimmten Stil hat und dieser Stil ist, dass ich dem Text auch diese Akzentfarbe gebe und ich eine Schriftgröße von 22 verwenden möchte, um wirklich auffallen zu
müssen und später Wir werden auch eine benutzerdefinierte Schriftart verwenden. Und dann erhält diese Ansicht hier
den Container-Stil und der Text hier natürlich den Zahlenstil. Mit dieser Einstellung können wir den Nummerncontainer im Startbildschirm verwenden.
Dort fügen wir einfach diesen Import hinzu, und was wir hier tun, ist ziemlich
normal, dass Sie mehrere Komponenten haben, aus denen Sie Ihre Anwendung zusammenstellen.
Jetzt können wir den Nummerncontainer in der Startbildschirm-Bildschirmkomponente verwenden, ihn hier unter diesem Text hinzufügen und im Nummerncontainer
erhalten wir den Inhalt hier mit Requisitenkindern, wir geben ihn mit Requisitenkindern aus, das heißt, wir müssen
ihn übergeben zwischen dem öffnenden und dem
schließenden Tag leiten wir hier die ausgewählte Nummer weiter.
Nun, das ist nur mein Vorschlag, wie wir das stylen könnten, aber ich mag den
Stil und dann werde ich für den Moment hier eine Schaltfläche hinzufügen, die allerdings ein selbstschließendes Tag ist, die eingebaute
Schaltfläche mit dem Titel des Startspiels Kappen, um es wirklich hervorzuheben und dies zu speichern, und jetzt, wenn wir hier eine Zahl wählen, bekommen wir diese und
es sieht nicht zu hässlich aus, würde ich sagen. Dennoch gibt es zwei Dinge, die ich
ändern möchte: Dieser Text hier sollte zentriert sein und dieses Feld mit der Nummer sollte
nicht so breit sein wie das umgebende Feld, sondern nur so breit, wie es die Nummer benötigt.
Damit beide funktionieren, gehe ich zu meiner Karte, die den gesamten Inhalt hier enthält, und damit gehe ich
zu dem Stil im Startspielbildschirm, den ich auch auf
dieser Karte verwende.
Das ist mein Zusammenfassungscontainer und da sind wir Sie können die Elemente dort ausrichten, um sie zu zentrieren, anstatt die Standardeinstellung zu verwenden,
die gedehnt werden würde. Jetzt wird diese automatisch zentriert und das Feld ist nur so breit,
wie es die Anzahl erfordert.
Nun, das sieht nicht allzu schäbig aus. Eine
letzte Sache, die mir gerade aufgefallen ist, ist, dass ich beim Bestätigen einer Eingabe auch die Tastatur-API verwenden
möchte, um die Tastatur zu schließen, sodass wir auch schließen, sobald wir hier auf Bestätigen klicken die Tastatur und jetzt haben
wir hier eine schöne Ausgabe.
Damit haben wir einen soliden Basis-Look, ich würde sagen, wir können eine Nummer
auswählen, wir führen eine grobe Validierung durch, um sicherzustellen, dass wir eine gültige Nummer haben, und der nächste Schritt ist, dass
diese Schaltfläche zum Starten des Spiels funktioniert und wir tauschen das, was wir hier auf dem Bildschirm sehen, gegen unseren Bildschirm aus,
auf dem der Computer jetzt Vermutungen anstellt, und stellen dann sicher, dass wir dem Benutzer die Möglichkeit geben, zu sagen,
ob die Zahlen größer oder niedriger sein sollten, und wir
dann bei einigen Punkt sind fertig und zeigen ein Spiel über dem Bildschirm.