1 00:00:02,310 --> 00:00:08,400 Es liegt natürlich an Ihnen, wie Sie diesen Bestätigungstext hier formatieren möchten oder eigentlich nicht nur Text sein 2 00:00:08,400 --> 00:00:15,630 sollten, sondern eine Ansicht mit dem darin enthaltenen Text, der unsere Nummer ausgibt, und dann eine Schaltfläche zum Starten des Spiels, 3 00:00:15,630 --> 00:00:21,780 und Sie können definitiv pausieren das Video an dieser Stelle und überlegen Sie sich dort Ihr eigenes Styling, 4 00:00:21,780 --> 00:00:23,050 Ihr eigenes Layout. 5 00:00:23,100 --> 00:00:27,510 Ich habe ein bestimmtes Layout im Sinn, das sich sicherlich von Ihrem unterscheiden wird, aber 6 00:00:27,510 --> 00:00:32,430 es gibt hier keine falsche oder richtige Entscheidung. Nehmen Sie dies also definitiv als eine weitere Chance, 7 00:00:32,430 --> 00:00:36,990 Ihr eigenes Layout dafür zu erstellen, und eine Schaltfläche, die im Moment nichts bewirkt Aber das 8 00:00:36,990 --> 00:00:42,520 ist da, damit der Benutzer das Spiel starten kann. Nach einer kurzen Pause, mit der Sie das Video anhalten 9 00:00:42,520 --> 00:00:45,370 können, werde ich meine Lösung zusammen mit Ihnen implementieren. 10 00:00:45,420 --> 00:00:49,020 Also hier ist, wie ich denke, dass dies schön aussehen würde. 11 00:00:49,050 --> 00:00:55,640 Ich möchte eine Ansicht haben, damit ich einen allgemeinen Container darum herum einrichten kann oder vielleicht keine Ansicht, aber warum 12 00:00:55,650 --> 00:00:57,720 verwenden wir unsere Karte hier nicht, das 13 00:00:57,720 --> 00:00:59,680 klingt nach einer guten Idee. 14 00:00:59,730 --> 00:01:04,980 Nun, diese Karte hat, wenn wir sie uns ansehen, keinen Rand und ich möchte einen gewissen 15 00:01:04,980 --> 00:01:07,950 Abstand zwischen dieser Karte oben und meiner Übersichtskarte haben. 16 00:01:08,070 --> 00:01:15,540 Deshalb gebe ich hier hier in meinem Stylesheet einen separaten Stil, im Startspielbildschirm benenne ich diesen Zusammenfassungscontainer, 17 00:01:15,540 --> 00:01:21,570 der Name liegt wie immer bei Ihnen und ich möchte einen Rand nach 18 00:01:21,570 --> 00:01:35,400 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 19 00:01:35,400 --> 00:01:44,710 einer neuen Zeile die Nummer auf eine schön präsentierte Weise ausgegeben, vielleicht die Nummer in einer Art a Feld mit einem 20 00:01:44,710 --> 00:01:51,160 separaten Rand mit abgerundeten Ecken, so dass es deutlich sichtbar oder auch größer als 21 00:01:51,310 --> 00:01:56,740 der andere Text ist. Daher füge ich hier eine Ansicht mit einem 22 00:01:56,740 --> 00:02:04,070 Text hinzu und in diesem Text habe ich die ausgewählte Nummer, aber jetzt das Die Ansicht 23 00:02:04,620 --> 00:02:11,030 und der Text sollten ein spezielles Design erhalten. Da ich beabsichtige, das wiederzuverwenden, werde 24 00:02:11,030 --> 00:02:12,690 ich es tatsächlich 25 00:02:12,800 --> 00:02:24,080 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 26 00:02:25,300 --> 00:02:33,850 React Native und habe dann die Nummerncontainerkomponente hier, exportiere den Standardnummerncontainer und natürlich benötigen wir hier auch ein Stylesheet, also 27 00:02:34,090 --> 00:02:41,880 richten wir ein Stylesheet ein auch mit Stylesheet. dort unten erstellen und dann in dieser Komponente werde 28 00:02:42,360 --> 00:02:49,320 ich diese Ansicht hier mit der ausgewählten Nummer zurückgeben, die jetzt jedoch übergeben werden muss, und ich 29 00:02:49,530 --> 00:02:55,140 erwarte, dass sie mit Hilfe von zwischen den öffnenden und schließenden Tags meiner eigenen 30 00:02:55,320 --> 00:02:57,800 Komponente verschoben wird Requisiten Kinder. 31 00:02:57,870 --> 00:03:02,270 Jetzt können Sie diesen Container natürlich frei konfigurieren. 32 00:03:02,370 --> 00:03:11,590 Ich füge hier nur einen Containerstil und einen Containernamen hinzu, bei dem ich denke, dass eine Randbreite von 33 00:03:11,650 --> 00:03:20,650 zwei gut aussehen könnte, also ein bisschen breiter, breiter. Bei einer Rahmenfarbe, bei der ich meine Primärfarbe oder meine Akzentfarbe verwenden 34 00:03:20,680 --> 00:03:23,670 möchte, werden wir sehen, welche besser aussieht. 35 00:03:23,770 --> 00:03:33,400 Importieren wir also Farben aus Konstanten / Farben und für die Rahmenfarbe. Verwenden Sie dann zunächst den Farbakzent und 36 00:03:33,400 --> 00:03:39,670 sehen Sie, wie das aussieht. Einige Polsterungen, so dass sich die Zahl 37 00:03:39,670 --> 00:03:42,070 nicht direkt an den Rändern des 38 00:03:42,080 --> 00:03:49,630 umgebenden Felds befindet, sitzen nicht direkt neben dem Rand, ein Randradius von 10, um einige abgerundete Ränder zu haben, 39 00:03:49,630 --> 00:03:50,440 einige 40 00:03:50,440 --> 00:03:56,940 abgerundete Ecken entschuldigen mich übrigens, wenn Sie möchten Wenn Sie einzelne Ecken als Ziel festlegen möchten, 41 00:03:57,120 --> 00:04:06,780 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 42 00:04:06,780 --> 00:04:13,980 Einstellungen des Benutzers berücksichtigt, ob es sich um eine Sprache von links nach rechts oder von rechts 43 00:04:13,980 --> 00:04:22,820 nach links handelt, sodass Sie alle einzelnen Elemente als Ziel festlegen können Ecken auch oder setzen Sie einen Radius für alle Ecken 44 00:04:23,340 --> 00:04:32,120 mit Randradius und fügen Sie hier auch einen kleinen Rand hinzu, Rand vertikal von 10, um hier einen gewissen Abstand zum oberen 45 00:04:32,300 --> 00:04:40,340 und unteren Rand dieses Containers zu haben und auch wichtig, zentrieren Sie den Text dort Wenn Sie die Elementmitte ausrichten 46 00:04:40,340 --> 00:04:48,740 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 47 00:04:48,740 --> 00:04:57,230 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 48 00:04:57,230 --> 00:05:04,280 müssen und später Wir werden auch eine benutzerdefinierte Schriftart verwenden. Und dann erhält diese Ansicht hier 49 00:05:04,280 --> 00:05:13,830 den Container-Stil und der Text hier natürlich den Zahlenstil. Mit dieser Einstellung können wir den Nummerncontainer im Startbildschirm verwenden. 50 00:05:13,830 --> 00:05:19,740 Dort fügen wir einfach diesen Import hinzu, und was wir hier tun, ist ziemlich 51 00:05:19,740 --> 00:05:25,000 normal, dass Sie mehrere Komponenten haben, aus denen Sie Ihre Anwendung zusammenstellen. 52 00:05:25,160 --> 00:05:31,560 Jetzt können wir den Nummerncontainer in der Startbildschirm-Bildschirmkomponente verwenden, ihn hier unter diesem Text hinzufügen und im Nummerncontainer 53 00:05:32,010 --> 00:05:38,160 erhalten wir den Inhalt hier mit Requisitenkindern, wir geben ihn mit Requisitenkindern aus, das heißt, wir müssen 54 00:05:38,220 --> 00:05:41,190 ihn übergeben zwischen dem öffnenden und dem 55 00:05:41,250 --> 00:05:44,370 schließenden Tag leiten wir hier die ausgewählte Nummer weiter. 56 00:05:44,580 --> 00:05:48,710 Nun, das ist nur mein Vorschlag, wie wir das stylen könnten, aber ich mag den 57 00:05:48,900 --> 00:05:54,630 Stil und dann werde ich für den Moment hier eine Schaltfläche hinzufügen, die allerdings ein selbstschließendes Tag ist, die eingebaute 58 00:05:55,080 --> 00:06:02,890 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 59 00:06:02,940 --> 00:06:08,820 es sieht nicht zu hässlich aus, würde ich sagen. Dennoch gibt es zwei Dinge, die ich 60 00:06:08,820 --> 00:06:15,060 ändern möchte: Dieser Text hier sollte zentriert sein und dieses Feld mit der Nummer sollte 61 00:06:15,330 --> 00:06:22,120 nicht so breit sein wie das umgebende Feld, sondern nur so breit, wie es die Nummer benötigt. 62 00:06:22,860 --> 00:06:30,260 Damit beide funktionieren, gehe ich zu meiner Karte, die den gesamten Inhalt hier enthält, und damit gehe ich 63 00:06:30,260 --> 00:06:33,900 zu dem Stil im Startspielbildschirm, den ich auch auf 64 00:06:34,040 --> 00:06:35,480 dieser Karte verwende. 65 00:06:35,750 --> 00:06:45,400 Das ist mein Zusammenfassungscontainer und da sind wir Sie können die Elemente dort ausrichten, um sie zu zentrieren, anstatt die Standardeinstellung zu verwenden, 66 00:06:45,400 --> 00:06:52,280 die gedehnt werden würde. Jetzt wird diese automatisch zentriert und das Feld ist nur so breit, 67 00:06:52,280 --> 00:06:54,610 wie es die Anzahl erfordert. 68 00:06:54,700 --> 00:06:57,360 Nun, das sieht nicht allzu schäbig aus. Eine 69 00:06:57,370 --> 00:07:03,160 letzte Sache, die mir gerade aufgefallen ist, ist, dass ich beim Bestätigen einer Eingabe auch die Tastatur-API verwenden 70 00:07:03,190 --> 00:07:09,940 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 71 00:07:10,180 --> 00:07:12,220 wir hier eine schöne Ausgabe. 72 00:07:12,220 --> 00:07:16,180 Damit haben wir einen soliden Basis-Look, ich würde sagen, wir können eine Nummer 73 00:07:16,180 --> 00:07:22,210 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 74 00:07:22,210 --> 00:07:28,540 diese Schaltfläche zum Starten des Spiels funktioniert und wir tauschen das, was wir hier auf dem Bildschirm sehen, gegen unseren Bildschirm aus, 75 00:07:28,540 --> 00:07:34,540 auf dem der Computer jetzt Vermutungen anstellt, und stellen dann sicher, dass wir dem Benutzer die Möglichkeit geben, zu sagen, 76 00:07:34,540 --> 00:07:37,850 ob die Zahlen größer oder niedriger sein sollten, und wir 77 00:07:37,990 --> 00:07:41,770 dann bei einigen Punkt sind fertig und zeigen ein Spiel über dem Bildschirm.