1
00:00:02,220 --> 00:00:04,630
Nachdem wir nun eine Kopfzeile erhalten

2
00:00:04,650 --> 00:00:10,950
haben, können wir mit dem Teil fortfahren, in dem Benutzer eine Nummer eingeben können, die der

3
00:00:10,950 --> 00:00:15,920
Computer danach erraten sollte. Und dafür hier in der App. js Datei, unter dem

4
00:00:15,920 --> 00:00:22,790
Header, möchte ich natürlich den Eingabebereich des Benutzers haben. Nach wie vor werde ich dies in einer

5
00:00:22,790 --> 00:00:29,780
separaten Komponente und nicht hier in der App behandeln. js alle Komponenten relativ schlank zu halten und wir könnten

6
00:00:29,780 --> 00:00:34,850
diese Komponente hier im Komponentenordner erstellen, das wäre nicht falsch, aber da ich jetzt an

7
00:00:34,850 --> 00:00:42,110
einer Komponente arbeiten werde, die im Wesentlichen für alles verantwortlich ist, was wir auf dem Bildschirm außer dem Header sehen, behandle ich

8
00:00:42,140 --> 00:00:47,600
Diese Komponente als eine Art spezielle Komponente, ich werde sie als Bildschirm bezeichnen und in einem Bildschirmordner

9
00:00:47,600 --> 00:00:53,000
speichern, da das fertige Spiel im Wesentlichen drei verschiedene Bildschirme hat - einen zum Konfigurieren und

10
00:00:53,000 --> 00:00:58,040
Starten des Spiels, einen, wenn das Spiel läuft Laufen und eine, wenn das Spiel vorbei

11
00:00:58,100 --> 00:01:04,520
ist und ich diese speziellen Komponenten haben möchte, die technisch völlig normale Komponenten sind, aber einen besonderen Zweck erfüllen.

12
00:01:04,730 --> 00:01:10,790
Ich möchte, dass sie in einem separaten Ordner gespeichert werden, und das ist nur meine persönliche Designentscheidung, das

13
00:01:10,790 --> 00:01:16,790
tun Sie nicht Ich muss sie nicht aufbewahren. Technisch gibt es keinen Grund, es zu tun oder nicht zu

14
00:01:16,790 --> 00:01:18,750
tun, React Native ist es einfach egal.

15
00:01:18,770 --> 00:01:24,200
Also werde ich es hier speichern und diesen StartGameScreen nennen. js um auch im Namen wirklich klar

16
00:01:24,200 --> 00:01:30,740
zu machen, dass dies eine spezielle Komponente für mich ist, aber wie gesagt, technisch gesehen ist es eine normale

17
00:01:30,770 --> 00:01:37,580
Komponente und deshalb importieren wir React von React und wir importieren natürlich auch einige Dinge von React Native und wir

18
00:01:37,880 --> 00:01:44,210
Ich kann bereits sagen, dass wir sicherlich eine Ansicht benötigen, da Sie wahrscheinlich keine Komponente erstellen können. Nun,

19
00:01:44,210 --> 00:01:49,060
Sie können aber nicht so viele Komponenten, die Sie ohne Ansichten erstellen können.

20
00:01:49,160 --> 00:01:54,620
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

21
00:01:54,620 --> 00:02:02,870
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

22
00:02:03,500 --> 00:02:10,130
Konstante und starte den Spielbildschirm, eine funktionale Komponente, die so aussieht.

23
00:02:10,130 --> 00:02:19,330
Dort haben wir ein Styles-Objekt mit Stylesheet. Erstellen Sie, so und wo ich dann den Startbildschirm so exportiere, und Sie können

24
00:02:19,450 --> 00:02:27,430
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

25
00:02:27,430 --> 00:02:32,890
Grunde so aussehen: Sie importieren React, Sie importieren einige Dinge aus React Native, Sie definieren Ihre Komponente,

26
00:02:32,890 --> 00:02:39,280
der Name unterscheidet sich natürlich, Sie haben Ihr Stilobjekt und Sie exportieren es, das ist so ziemlich immer das

27
00:02:39,310 --> 00:02:40,740
gleiche, so dass

28
00:02:40,780 --> 00:02:46,740
Sie dies als Vorlage speichern können, wenn Sie möchten. Ich möchte hier jedoch nicht, also werde

29
00:02:46,740 --> 00:02:52,800
ich einfach weiter an der Komponente selbst arbeiten und die Frage ist nun, was

30
00:02:52,800 --> 00:02:59,760
wir in diesem Startspielbildschirm rendern. Wie soll es aussehen? Am Ende werde ich eine

31
00:02:59,760 --> 00:03:06,960
Wrap-Ansicht haben, die meinen gesamten Bildschirm umgibt, da ich denke, dass diese Art von Sinn macht

32
00:03:06,960 --> 00:03:14,040
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

33
00:03:14,040 --> 00:03:18,420
wird nicht mit der in der App kollidieren. js, wir hätten auch unterschiedliche

34
00:03:18,420 --> 00:03:23,760
Namen wählen können, diese beiden sind einfach nicht miteinander verbunden, da es sich letztendlich um

35
00:03:23,760 --> 00:03:29,790
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

36
00:03:29,790 --> 00:03:36,390
ä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

37
00:03:36,390 --> 00:03:42,810
eins so zu biegen, dass es den gesamten Platz einnimmt, den es bekommen kann, was bedeutet, dass es, da ich

38
00:03:42,810 --> 00:03:47,760
es unter der Kopfzeile hinzufüge, den gesamten Raum unter der Kopfzeile sowohl vertikal als auch

39
00:03:48,780 --> 00:03:55,350
horizontal und darüber hinaus einnimmt Ich möchte hier auch eine Auffüllung von 10 hinzufügen, damit der Inhalt nicht direkt an

40
00:03:55,350 --> 00:04:01,470
den Rändern dieses Bildschirms angezeigt wird, aber links, rechts, oben und unten ein gewisser Abstand besteht, und ich

41
00:04:01,470 --> 00:04:03,860
füge die Mitte der Ausrichtungselemente hinzu.

42
00:04:03,930 --> 00:04:09,900
Beachten Sie, dass in jeder Ansicht standardmäßig die Flexbox und standardmäßig die Flexrichtungsspalte verwendet wird. Richten Sie

43
00:04:09,930 --> 00:04:13,960
die Elemente so aus, dass die Elemente entlang der Querachse

44
00:04:13,980 --> 00:04:18,240
positioniert werden. Da die Standardrichtung also die Spalte ist, ist die Querachse

45
00:04:18,240 --> 00:04:20,000
von links nach rechts,

46
00:04:20,070 --> 00:04:25,380
also eine horizontale Achse. Dadurch werden Elemente in der Mitte horizontal, aber nicht vertikal ausgerichtet.

47
00:04:25,380 --> 00:04:31,200
Dort verwenden wir die Standardeinstellung von adjustContent flex start, aber da ich

48
00:04:31,200 --> 00:04:39,210
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

49
00:04:39,210 --> 00:04:41,600
automatische Formatierung hat mein Tag hier geschlossen, was ich natürlich nicht tun

50
00:04:41,760 --> 00:04:42,830
möchte. Lassen Sie mich dies

51
00:04:43,140 --> 00:04:47,070
zurücksetzen und jetzt haben wir diese Ansicht für unsere Spielbildschirm. Um zu sehen, ob es

52
00:04:47,070 --> 00:04:49,220
funktioniert, gebe ich hier nur einen

53
00:04:49,320 --> 00:04:56,110
Text aus, den Spielbildschirm, nur einen Dummy-Platzhalter. Formatieren Sie das neu und jetzt in App. js, verwenden

54
00:04:56,530 --> 00:05:05,880
wir diesen Bildschirm, indem wir den Startspielbildschirm aus dem Bildschirmordner importieren und

55
00:05:05,880 --> 00:05:09,820
dort den Spielbildschirm starten

56
00:05:09,890 --> 00:05:19,580
und ihn dann einfach hier hinzufügen. Wenn wir dies speichern, sehen wir den Spielbildschirm hier und auch auf Android, so dass dies

57
00:05:19,650 --> 00:05:20,250
funktioniert.

58
00:05:20,250 --> 00:05:27,270
Wir verwenden diese zweite separate Komponente, die wir jetzt im Grunde genommen als Vollbildkomponente oder fast als Vollbild verwenden,

59
00:05:27,360 --> 00:05:28,420
den Teil

60
00:05:28,430 --> 00:05:30,420
unter der Kopfzeile am Ende.