1
00:00:02,450 --> 00:00:08,430
Bevor wir weitere Logik hinzufügen, arbeiten wir an der Benutzeroberfläche und an der Ausgabe.

2
00:00:08,450 --> 00:00:11,670
Also hier werde ich am Ende eine

3
00:00:11,700 --> 00:00:23,190
Ansicht zurückgeben und in dieser Ansicht möchte ich einen Text haben, in dem ich sage, dass Gegner raten, also was der Computer erraten hat, und dann können

4
00:00:23,230 --> 00:00:27,760
wir den Zahlencontainer wiederverwenden, um diese erratene Zahl schön darzustellen.

5
00:00:27,760 --> 00:00:34,330
Das ist ein großer Vorteil solcher wiederverwendbaren Komponenten, weil Sie sie wiederverwenden können, denke ich. Genau

6
00:00:34,330 --> 00:00:36,040
das tun wir hier.

7
00:00:36,040 --> 00:00:42,400
Wir werden diesen Zahlencontainer wieder verwenden, unterhalb dessen der Gegner den Text hier errät, um unseren eigenen Zahlencontainer

8
00:00:42,400 --> 00:00:44,510
zu haben und die aktuelle Vermutung

9
00:00:44,650 --> 00:00:47,810
hier gut auszugeben. Die aktuelle Vermutung ist unser

10
00:00:47,830 --> 00:00:52,130
Zustand. Denken Sie daran, dass wir dies hier initialisieren und dass wir es bald auch ändern können.

11
00:00:52,210 --> 00:01:00,340
Das ist es also, was hier ausgegeben wird. Darunter können wir jetzt vielleicht auch unsere Karte mit zwei Tasten präsentieren, mit denen der Benutzer dem

12
00:01:00,340 --> 00:01:02,290
Computer einen Hinweis geben kann.

13
00:01:02,950 --> 00:01:11,320
Hier importiere ich also eine Karte von einer Komponentenkarte, um diese Schaltflächen dort einzuwickeln. Daher können wir bereits eine Schaltfläche von

14
00:01:11,320 --> 00:01:15,850
React Native importieren, da wir diese ebenfalls in einer Sekunde benötigen

15
00:01:16,200 --> 00:01:25,880
und dann einfach unsere Karte hier und in dieser Karte haben Ich möchte eine Schaltfläche mit dem Titel "niedriger" und eine weitere Schaltfläche, bei

16
00:01:25,880 --> 00:01:33,860
der wir "größer" sagen. Dies sind zwei Richtungen, in die wir einen Hinweis geben können. Ist also die Zahl, die

17
00:01:33,890 --> 00:01:37,070
Sie als zu niedrig erraten haben, zu

18
00:01:37,070 --> 00:01:44,520
hoch, dann können wir die Computer einen Hinweis mit diesen Tasten und onPress, ich werde im Moment nur

19
00:01:44,820 --> 00:01:49,500
eine leere Funktion registrieren, die nichts tut, die sich natürlich bald

20
00:01:49,500 --> 00:01:57,060
ändern wird und effektiv eine neue Zufallszahl generiert und damit ist es jetzt Zeit hinzuzufügen einige Stile hier.

21
00:01:57,110 --> 00:02:02,450
Ich möchte einen Stil für meinen gesamten Bildschirm haben, und wie zuvor wird dieser

22
00:02:02,450 --> 00:02:06,950
flexibel, um den gesamten verfügbaren Platz auf dem Bildschirm unter der

23
00:02:07,070 --> 00:02:12,410
Kopfzeile, die wir oben haben, zu belegen. Fügen Sie einen Abstand von 10

24
00:02:12,410 --> 00:02:23,370
hinzu, um etwas Platz um den Inhalt zu haben Damit es nicht direkt an den Rändern sitzt und hier auch Ausrichtungselemente verwendet, um unseren Inhalt horizontal zu zentrieren,

25
00:02:23,370 --> 00:02:29,190
und diese Bildschirmeigenschaft in der umgebenden Ansicht hier verwendet wird, um dort Stile hinzuzufügen, sodass

26
00:02:29,190 --> 00:02:36,400
der Inhalt auf diesem Gesamtbildschirm gut positioniert ist. Für diese Schaltflächen wäre es schön, wenn sie nebeneinander sitzen würden.

27
00:02:36,470 --> 00:02:43,480
Auf der Karte können wir also einen Stil hinzufügen, möglicherweise den Schaltflächencontainer hier als Namen verwenden und daher denselben Namen hier in

28
00:02:43,480 --> 00:02:47,320
unserem Stylesheet hinzufügen, da dies der Fall ist Wir beziehen uns hier

29
00:02:47,560 --> 00:02:54,160
auf die Flex-Richtung und setzen sie auf Zeile. Wir können hier eine Flex-Richtung festlegen, da ich dies auf meiner Karte

30
00:02:54,160 --> 00:02:54,930
mache. Wenn

31
00:02:55,060 --> 00:03:01,570
wir uns diese Karte ansehen, verteilen wir diese Stile auf eine Ansicht und eine view verwendet die Flexbox, damit wir

32
00:03:01,570 --> 00:03:06,820
hier eine Flexrichtung festlegen können, und genau das mache ich dort. Dabei stelle ich die Flexrichtung

33
00:03:06,820 --> 00:03:13,780
auf die Reihe ein, um Elemente horizontal nebeneinander zu positionieren. Rechtfertigen Sie den Inhalt mit dem Leerzeichen um,

34
00:03:13,780 --> 00:03:21,760
um den freien Speicherplatz um die Schaltflächen links und rechts gleichmäßig zu verteilen und einen Rand von 20 hinzuzufügen, damit

35
00:03:21,760 --> 00:03:29,080
diese Karte mit unseren Schaltflächen nicht direkt neben der erratenen Zahl sitzt, sondern vorhanden ist Einige Abstände dazwischen

36
00:03:29,080 --> 00:03:35,770
und möglicherweise auch eine Breite von 300 und eine maximale Breite von 80%, um sicherzustellen, dass

37
00:03:35,770 --> 00:03:43,530
dies niemals die Grenzen der übergeordneten Ansicht überschreiten kann. Wenn wir dies speichern, wäre es schön, das zu

38
00:03:43,530 --> 00:03:47,460
sehen, und dafür brauchen wir eine Möglichkeit, zum Spielbildschirm zu gelangen.

39
00:03:47,460 --> 00:03:53,070
Jetzt verwenden wir den Startbildschirm in der App-Komponente. Daher müssen wir dort auch den Spielbildschirm verwenden und

40
00:03:53,070 --> 00:03:58,830
die ausgewählte Nummer in dieser App-Komponente verwalten, da dies die einzige Komponente ist, die ständig auf dem Bildschirm

41
00:03:58,830 --> 00:04:00,720
angezeigt wird. Nun, neben dem Header,

42
00:04:00,720 --> 00:04:06,120
aber die App-Komponente ist auch die Komponente, die den Startspielbildschirm und den Spielbildschirm bald enthalten wird,

43
00:04:06,330 --> 00:04:07,680
und daher ist es

44
00:04:07,680 --> 00:04:12,540
die Komponente, in der wir auch Daten an den Startspielbildschirm und an den Spielbildschirm

45
00:04:12,660 --> 00:04:13,730
weitergeben können.

46
00:04:13,860 --> 00:04:22,680
Importieren wir also den Spielbildschirm hier vom Bildschirm des Spielbildschirms und natürlich möchte ich meinen Spielbildschirm hier rendern, aber nicht, wenn der

47
00:04:22,680 --> 00:04:29,010
Startbildschirm noch sichtbar ist, möchte ich eine der beiden und eine Randnotiz haben, es gibt

48
00:04:29,010 --> 00:04:34,110
auch eine total verschiedene Arten des Ladens verschiedener Komponenten und wir werden

49
00:04:34,110 --> 00:04:37,540
in einem separaten Modul im Navigationsmodul darauf eingehen.

50
00:04:37,560 --> 00:04:43,050
Während wir später verschiedene Navigationslösungen behandeln werden, gibt es derzeit eine Möglichkeit, einen der beiden Bildschirme

51
00:04:43,050 --> 00:04:44,840
zu rendern. Wir haben

52
00:04:45,030 --> 00:04:49,620
auch die Möglichkeit, derzeit nur einen dieser beiden Bildschirme zu rendern, und dafür

53
00:04:49,620 --> 00:04:52,040
benötigen wir kein spezielles Werkzeug oder so

54
00:04:52,380 --> 00:04:56,770
etwas, wir können normale Reaktionslogik verwenden, wir können diesen Inhalt bedingt rendern.

55
00:04:56,940 --> 00:05:00,980
Alles, was wir dafür tun müssen, ist, dass wir einen Status in unserer

56
00:05:00,990 --> 00:05:04,950
App-Komponente verwalten müssen. Wir müssen auch hier die ausgewählte Nummer verwalten.

57
00:05:04,950 --> 00:05:14,250
Also werde ich hier den Verwendungsstatus hinzufügen und dann einfach meinen Status hier verwenden und diesen am Ende ohne Wert initialisieren. Dort möchte ich

58
00:05:14,250 --> 00:05:15,010
die

59
00:05:15,260 --> 00:05:24,000
ausgewählte Nummer oder die Benutzernummer abrufen und habe hier und anfänglich die Benutzernummer als Aktualisierungsfunktion festgelegt Das ist undefiniert und jetzt brauche

60
00:05:24,000 --> 00:05:25,280
ich eine Funktion,

61
00:05:25,380 --> 00:05:27,250
mit der wir dies ändern

62
00:05:27,300 --> 00:05:29,870
können, wie z. B. den Startspiel-Handler,

63
00:05:30,030 --> 00:05:30,920
der sich

64
00:05:30,930 --> 00:05:31,920
wie ein

65
00:05:31,920 --> 00:05:38,610
passender Name anhört, da wir eine solche Nummer haben, wenn der Benutzer hier im Startspielbildschirm die Schaltfläche

66
00:05:38,610 --> 00:05:40,550
zum Starten des Spiels drückt.

67
00:05:40,800 --> 00:05:45,240
Der Handler des Startspiels erhält dann die ausgewählte Nummer als Eingabe. Dies ist eine Annahme, die wir

68
00:05:45,240 --> 00:05:51,860
hier treffen und die Benutzernummer hier auf diese ausgewählte Nummer setzen müssen. Wann immer dies der Fall ist, wann

69
00:05:51,920 --> 00:05:56,330
immer wir eine Benutzernummer haben, wissen wir, dass das Spiel läuft

70
00:05:56,330 --> 00:06:00,320
und dass wir den Spielbildschirm anstelle des Startspielbildschirms rendern können.

71
00:06:00,350 --> 00:06:06,530
Hier können wir beispielsweise eine Inhaltsvariable verwenden und sagen, unser Standardinhalt ist der Startbildschirm des Spiels. Dies ist normaler

72
00:06:06,530 --> 00:06:07,140
React-Code,

73
00:06:07,250 --> 00:06:13,130
wie Sie ihn auch aus React For Web kennen. Sie können solche Komponenten in Variablen speichern und die

74
00:06:13,190 --> 00:06:16,710
Variable dann einfach nach unten ausgeben dort ist es auch das,

75
00:06:16,730 --> 00:06:23,050
was wir bereits im Startbildschirm mit der bestätigten Ausgabe machen. Der Startbildschirm ist also unsere Standardausgabe, aber jetzt können

76
00:06:23,050 --> 00:06:24,120
wir eine

77
00:06:24,130 --> 00:06:28,730
if-Prüfung hinzufügen und prüfen, ob der Inhalt wahr ist. Dies wird durch diese

78
00:06:28,740 --> 00:06:33,510
Prüfung überprüft. Daher ist er zunächst falsch, wenn er nicht definiert ist, aber

79
00:06:33,630 --> 00:06:40,260
jetzt, wenn er wahr ist, werden wir kann die Benutzernummer festlegen, also habe ich überprüft, ob die Benutzernummer wahr

80
00:06:40,260 --> 00:06:42,060
ist, wenn das wahr ist,

81
00:06:42,060 --> 00:06:48,330
dann wissen wir, dass eine Nummer ausgewählt wurde, sie ist undefiniert und daher anfangs falsch, aber wenn sie

82
00:06:48,510 --> 00:06:49,700
wahr ist, wenn

83
00:06:49,710 --> 00:06:56,450
a Nummer wurde ausgewählt, dann setzen wir den Inhalt hier als Spielbildschirm und rendern dann alles, was sich dort

84
00:06:56,470 --> 00:07:01,370
unten im Inhalt befindet, und das wird entweder der Spielbildschirm oder der Startspielbildschirm sein.

85
00:07:01,380 --> 00:07:07,350
Wenn wir jetzt hier mit einem anderen ausgewählten auf Spiel starten klicken, sollte dies hier umgeschaltet werden, wenn und

86
00:07:07,470 --> 00:07:09,110
das ist wichtig, wenn

87
00:07:09,210 --> 00:07:15,840
wir sicherstellen, dass der Startspiel-Handler vom Startbildschirm aus ausgelöst werden kann. Dafür verwenden wir ein Standardreaktionsmuster, bei dem

88
00:07:15,840 --> 00:07:23,120
ein Verweis auf diesen Handler an diese Komponente weitergegeben wird, möglicherweise auf der onStartGame-Requisite, was für mich

89
00:07:23,130 --> 00:07:28,200
nach einem passenden Namen klingt. Wir leiten den Startspiel-Handler weiter,

90
00:07:28,200 --> 00:07:34,350
nur die Referenz ohne Klammern hier, nur eine Referenz, einen Zeiger auf diese Funktion und

91
00:07:34,740 --> 00:07:39,240
onStartGame ist jetzt eine Eigenschaft, die wir im Startspielbildschirm verwenden können.

92
00:07:39,300 --> 00:07:46,410
Wenn wir hier im Startbildschirm auf die Schaltfläche zum Starten des Spiels klicken, möchte ich diese Requisite am Ende

93
00:07:46,590 --> 00:07:47,370
auslösen.

94
00:07:47,370 --> 00:07:57,090
Hier habe ich also onPress und dort möchte ich am Ende onStartGame ausführen und die aktuell ausgewählte Nummer hier

95
00:07:57,090 --> 00:08:01,440
weiterleiten, die im Status des Startspielbildschirms verwaltet wird.

96
00:08:01,440 --> 00:08:08,310
Hier leite ich dies an onStartGame weiter und onStartGame ist an den Startspiel-Handler gebunden, der diese

97
00:08:08,370 --> 00:08:11,190
ausgewählte Nummer erwartet und dann empfängt.

98
00:08:11,190 --> 00:08:16,690
Auf diese Weise stellen wir sicher, dass das Klicken auf diese Schaltfläche zum Starten des Spielbildschirms diese Methode oder diese Funktion hier auslöst.

99
00:08:16,690 --> 00:08:17,700
Wenn diese Funktion

100
00:08:17,700 --> 00:08:20,570
ausgelöst wird, legen wir die Benutzernummer fest. Dadurch wird sichergestellt, dass der

101
00:08:20,580 --> 00:08:26,160
Inhalt der Spielbildschirm ist und daher angezeigt werden sollte der Spielbildschirm. Ein fehlendes Teil ist nun,

102
00:08:26,160 --> 00:08:33,120
dass ich auf dem Spielbildschirm die Benutzerauswahl benötige, um meine anfängliche Zufallszahl zu generieren und diese

103
00:08:33,150 --> 00:08:38,130
Benutzerauswahl für diese erste Zufallszahl korrekt auszuschließen. Daher müssen wir eine

104
00:08:38,130 --> 00:08:44,070
Eigenschaft namens Benutzerauswahl an den Spielbildschirm übergeben. Daher können wir hier die Benutzerauswahl-Requisite hinzufügen und

105
00:08:44,070 --> 00:08:49,920
die Benutzernummer übergeben, die der Status ist, den wir in der App-Komponente verwalten. Dies ist die ausgewählte

106
00:08:49,920 --> 00:08:53,040
Nummer, die wir in dem Status hier speichern. Geben

107
00:08:53,040 --> 00:08:55,580
Sie diese an den Spielbildschirm weiter.

108
00:08:55,830 --> 00:09:02,280
Ich hoffe also, dass der Datenfluss klar ist. Wir erhalten diese ausgewählte Nummer vom Startbildschirm, wenn diese Schaltfläche gedrückt wird. Die

109
00:09:02,280 --> 00:09:05,240
Schaltfläche zum Starten des Spiels wird gedrückt. Wir speichern

110
00:09:05,280 --> 00:09:10,440
sie dann im Status der App-Komponente hier im Status der Verwendungsnummer mit dem Hilfe der eingestellten

111
00:09:10,440 --> 00:09:16,170
Benutzernummer und wir verwenden diese Benutzernummer dann, um sie an den Spielbildschirm weiterzugeben, der nur gerendert wird, wenn

112
00:09:16,170 --> 00:09:21,510
wir eine Benutzernummer haben. Wenn also das Spiel läuft, wenn das Spiel so gestartet wurde, dass auf

113
00:09:21,510 --> 00:09:27,690
dem Spielbildschirm Wir können die Benutzernummer verwenden, die auf der Benutzerauswahl-Requisite empfangen wird, um dann die neue Zufallszahl zu generieren,

114
00:09:27,780 --> 00:09:33,870
die der Computer erraten hat, wo diese Benutzerauswahl, diese Benutzernummer, ausgeschlossen ist, so dass der Computer bei der allerersten

115
00:09:33,870 --> 00:09:41,050
Computerschätzung dies nicht kann Erraten Sie sofort die Nummer des Benutzers. Viel reden, lasst uns das alles speichern und

116
00:09:41,050 --> 00:09:43,020
es uns ansehen.

117
00:09:43,060 --> 00:09:50,660
Geben Sie 55 ein und bestätigen Sie und klicken Sie auf Spiel starten. Wir können beim Startspiel keine Variable finden.

118
00:09:50,710 --> 00:09:57,820
Das Problem hier ist also, dass ich hier ausführe, ja, das sollten Requisiten beim Startspiel sein, auf der

119
00:09:57,820 --> 00:10:03,080
Schaltfläche "Startspiel" in der Startspielkomponente, da dies natürlich eine Eigenschaft ist, die wir erhalten.

120
00:10:03,080 --> 00:10:05,270
Es ist keine hier definierte

121
00:10:05,380 --> 00:10:07,340
Funktion, sondern definiert Auf

122
00:10:07,420 --> 00:10:10,500
den Requisiten ist es am Ende diese Requisite.

123
00:10:10,780 --> 00:10:12,990
Also kleiner Fehler, lass es uns noch einmal

124
00:10:13,000 --> 00:10:15,330
versuchen, nachdem du das behoben hast, klicke auf Spiel

125
00:10:15,430 --> 00:10:17,410
starten und das sieht gut aus.

126
00:10:17,410 --> 00:10:18,620
Jetzt sehen wir,

127
00:10:18,620 --> 00:10:20,610
wie die Gegner raten, und wir können

128
00:10:20,620 --> 00:10:27,240
hier einige Hinweise geben, die momentan keine Wirkung haben, aber bald eine Wirkung haben werden, und deshalb sind wir auf dem nächsten Bildschirm,

129
00:10:27,250 --> 00:10:28,570
wir sind auf dem Spielbildschirm.

130
00:10:28,570 --> 00:10:35,320
Stellen wir nun sicher, dass wir dem Computer hier tatsächlich einige Hinweise geben können und dass der Computer die Möglichkeit

131
00:10:35,320 --> 00:10:38,740
hat, dies zu lösen und unsere Anzahl zu erraten.