1
00:00:02,450 --> 00:00:08,430
Zanim dodamy więcej logiki, popracujmy nad interfejsem użytkownika, a więc nad tym, co wypisujemy.

2
00:00:08,450 --> 00:00:11,670
Więc tutaj wrócę widok na

3
00:00:11,700 --> 00:00:23,190
końcu i w tym widoku chcę mieć tekst, w którym mówię, że przeciwnicy zgadują, więc co zgadł komputer, a następnie możemy ponownie

4
00:00:23,230 --> 00:00:27,760
użyć kontenera liczb, aby ładnie przedstawić ten odgadnięty numer.

5
00:00:27,760 --> 00:00:34,330
To ogromna zaleta posiadania takich komponentów wielokrotnego użytku, ponieważ, jak sądzę, możesz ich ponownie użyć, więc

6
00:00:34,330 --> 00:00:36,040
właśnie to robimy tutaj.

7
00:00:36,040 --> 00:00:42,400
Ponownie użyjemy tego kontenera liczb, poniżej tego przeciwnicy odgadują tekst tutaj, aby mieć własny

8
00:00:42,400 --> 00:00:44,510
kontener liczb i ładnie wyświetlać

9
00:00:44,650 --> 00:00:47,810
bieżące zgadywanie tutaj. Domyślamy się, że jest to

10
00:00:47,830 --> 00:00:52,130
nasz stan, pamiętaj, że to właśnie tutaj inicjalizujemy i co wkrótce będziemy mogli zmienić.

11
00:00:52,210 --> 00:01:00,340
Oto, co się tutaj podaje, poniżej możemy teraz przedstawić naszą kartę z dwoma przyciskami, które pozwalają użytkownikowi

12
00:01:00,340 --> 00:01:02,290
dać komputerowi podpowiedź.

13
00:01:02,950 --> 00:01:11,320
Więc tutaj zaimportuję kartę z karty komponentów, aby zawinąć tam te przyciski, a zatem możemy już również zaimportować przycisk

14
00:01:11,320 --> 00:01:15,850
z React Native, ponieważ będziemy potrzebować tego również za sekundę,

15
00:01:16,200 --> 00:01:25,880
a następnie po prostu mieć naszą kartę tutaj i na tej karcie , Chcę mieć przycisk z tytułem niższy i inny przycisk,

16
00:01:25,880 --> 00:01:33,860
w którym mówimy, że jest większy, to są dwa kierunki, w których możemy dać podpowiedź, więc liczba, którą

17
00:01:33,890 --> 00:01:37,070
odgadłeś za nisko, jest zbyt wysoka,

18
00:01:37,070 --> 00:01:44,520
wtedy możemy podać komputer podpowiedź z tymi przyciskami i onPress, w tej chwili po prostu zarejestruję

19
00:01:44,820 --> 00:01:49,500
pustą funkcję, która nic nie robi, co oczywiście wkrótce się

20
00:01:49,500 --> 00:01:57,060
zmieni i skutecznie wygeneruje nową liczbę losową, a dzięki temu nadszedł czas, aby dodać niektóre style tutaj.

21
00:01:57,110 --> 00:02:02,450
Chcę mieć styl dla całego ekranu i tak jak poprzednio, otrzymam flex

22
00:02:02,450 --> 00:02:06,950
jeden, aby zabrać całą dostępną przestrzeń na ekranie poniżej

23
00:02:07,070 --> 00:02:12,410
nagłówka, który mamy u góry, dodać dopełnienie 10, aby mieć trochę miejsca

24
00:02:12,410 --> 00:02:23,370
wokół zawartości tak aby nie znajdował się bezpośrednio na krawędziach, a także użył wyrównywania elementów w celu wyśrodkowania naszej zawartości w poziomie, a ta

25
00:02:23,370 --> 00:02:29,190
właściwość ekranu jest używana w widoku otaczającym tutaj, aby dodać ekran stylów, aby

26
00:02:29,190 --> 00:02:36,400
zawartość na tym ekranie była dobrze ustawiona. Teraz dla tych przycisków byłoby miło, gdyby siedzieli obok siebie,

27
00:02:36,470 --> 00:02:43,480
więc na karcie możemy dodać styl, może użyć pojemnika z guzikami jako nazwy tutaj, a zatem dodaj tę samą nazwę

28
00:02:43,480 --> 00:02:47,320
tutaj w naszym arkuszu stylów, ponieważ to jest to, co odnosimy

29
00:02:47,560 --> 00:02:54,160
się do tego i ustawiamy tutaj kierunek wygięcia w rzędzie i możemy tutaj ustawić kierunek wygięcia, ponieważ robię to

30
00:02:54,160 --> 00:02:54,930
na

31
00:02:55,060 --> 00:03:01,570
mojej karcie, ale jeśli się przyjrzymy, na tej karcie rozpowszechnimy te style w widoku i Widok używa Flexboksa,

32
00:03:01,570 --> 00:03:06,820
dzięki czemu możemy tutaj ustawić kierunek zgięcia i to właśnie tam robię, ustawiając kierunek zgięcia

33
00:03:06,820 --> 00:03:13,780
w rzędzie, aby pozycjonować elementy obok siebie w poziomie. justifyContent może być ze spacją wokół, aby

34
00:03:13,780 --> 00:03:21,760
równomiernie rozdzielić wolne miejsca wokół przycisków, po lewej i prawej stronie, a także dodać margines na górze 20,

35
00:03:21,760 --> 00:03:29,080
aby ta karta z naszymi przyciskami nie znajdowała się bezpośrednio przy odgadniętym numerze, ale jest niektóre odstępy

36
00:03:29,080 --> 00:03:35,770
między nimi, a także może dać to szerokość 300 i maksymalną szerokość 80%, aby mieć

37
00:03:35,770 --> 00:03:43,530
pewność, że nigdy nie przekroczy ona granic widoku macierzystego. Teraz, jeśli to uratujemy, fajnie byłoby to

38
00:03:43,530 --> 00:03:47,460
zobaczyć i potrzebujemy sposobu przejścia do ekranu gry.

39
00:03:47,460 --> 00:03:53,070
Teraz używamy ekranu startowego gry w komponencie aplikacji, więc będziemy musieli również użyć ekranu gry i

40
00:03:53,070 --> 00:03:58,830
zarządzać wybranym numerem w tym komponencie aplikacji, ponieważ jest to jedyny składnik, który jest cały czas

41
00:03:58,830 --> 00:04:00,720
na ekranie, poza nagłówkiem, ale

42
00:04:00,720 --> 00:04:06,120
komponent aplikacji jest również składnikiem, który wkrótce będzie zawierał ekran startowy gry i ekran gry,

43
00:04:06,330 --> 00:04:07,680
a zatem jest

44
00:04:07,680 --> 00:04:12,540
to składnik, w którym możemy również przekazywać dane do ekranu startowego gry i

45
00:04:12,660 --> 00:04:13,730
ekranu gry.

46
00:04:13,860 --> 00:04:22,680
Zaimportujmy tutaj ekran gry z ekranu ekranu gry i oczywiście chcę tutaj wyrenderować ekran gry, ale nie, jeśli ekran

47
00:04:22,680 --> 00:04:29,010
startowy gry jest nadal widoczny, chcę mieć jedną z dwóch i notatkę boczną, jest

48
00:04:29,010 --> 00:04:34,110
też całkowicie inny sposób ładowania różnych komponentów, a my zajmiemy się

49
00:04:34,110 --> 00:04:37,540
tym w osobnym module w module nawigacyjnym.

50
00:04:37,560 --> 00:04:43,050
Teraz, gdy omówimy później różne rozwiązania nawigacyjne, istnieje obecnie sposób renderowania jednego z dwóch

51
00:04:43,050 --> 00:04:44,840
ekranów, ale teraz mamy

52
00:04:45,030 --> 00:04:49,620
również sposób renderowania tylko jednego z tych dwóch ekranów i do tego

53
00:04:49,620 --> 00:04:52,040
nie potrzebujemy specjalnego narzędzia lub cokolwiek

54
00:04:52,380 --> 00:04:56,770
podobnego, możemy użyć normalnej logiki React, możemy warunkowo renderować tę treść.

55
00:04:56,940 --> 00:05:00,980
Wszystko, co musimy zrobić, to zarządzać jakimś stanem w naszym

56
00:05:00,990 --> 00:05:04,950
komponencie aplikacji, musimy również tutaj zarządzać wybranym numerem.

57
00:05:04,950 --> 00:05:14,250
Więc dodam tutaj stan użytkowania, a następnie po prostu użyję mojego stanu tutaj i zainicjuję to bez wartości na końcu, tam

58
00:05:14,250 --> 00:05:24,000
chcę uzyskać wybrany numer lub numer użytkownika i ustawić numer użytkownika jako funkcję aktualizacji tutaj i początkowo to jest niezdefiniowane, a

59
00:05:24,000 --> 00:05:25,280
teraz potrzebuję

60
00:05:25,380 --> 00:05:27,250
funkcji, w której

61
00:05:27,300 --> 00:05:29,870
możemy to zmienić, na przykład uruchomić

62
00:05:30,030 --> 00:05:31,920
program obsługi gry, która

63
00:05:31,920 --> 00:05:38,610
brzmi jak odpowiednia nazwa, ponieważ otrzymamy taką liczbę, jeśli użytkownik naciśnie tutaj przycisk uruchamiania gry

64
00:05:38,610 --> 00:05:40,550
na ekranie startowym gry.

65
00:05:40,800 --> 00:05:45,240
Zatem program obsługi gry startowej pobierze następnie wybraną liczbę jako dane wejściowe, to założenie, które

66
00:05:45,240 --> 00:05:51,860
musimy tutaj zrobić i ustawić numer użytkownika na tę wybraną tutaj. Teraz, ilekroć ma to miejsce, ilekroć

67
00:05:51,920 --> 00:05:56,330
mamy numer użytkownika, wiemy, że gra działa i wiemy,

68
00:05:56,330 --> 00:06:00,320
że możemy renderować ekran gry zamiast ekranu startowego.

69
00:06:00,350 --> 00:06:06,530
Więc tutaj możemy na przykład użyć zmiennej treści i powiedzieć, że naszą domyślną treścią jest ekran startowy gry, a

70
00:06:06,530 --> 00:06:07,140
to

71
00:06:07,250 --> 00:06:13,130
jest normalny kod React, tak jak znamy go z React For Web, możesz przechowywać takie komponenty w zmiennych,

72
00:06:13,190 --> 00:06:16,710
a następnie po prostu wyprowadzać zmienną w dół tam też robimy

73
00:06:16,730 --> 00:06:23,050
to już na ekranie startowym gry z potwierdzonym wyjściem. Tak więc ekran uruchamiania gier jest naszym

74
00:06:23,050 --> 00:06:24,120
domyślnym

75
00:06:24,130 --> 00:06:28,730
wyjściem, ale teraz możemy dodać sprawdzanie if i sprawdzanie, czy treść

76
00:06:28,740 --> 00:06:33,510
jest prawdziwa, to właśnie to sprawdzenie sprawdza, więc początkowo będzie fałszywe,

77
00:06:33,630 --> 00:06:40,260
jeśli jest niezdefiniowane, ale teraz, jeśli to prawda, można ustawić numer użytkownika, więc sprawdziłem, czy numer

78
00:06:40,260 --> 00:06:42,060
użytkownika to prawda, jeśli

79
00:06:42,060 --> 00:06:48,330
to prawda, to wiemy, że wybrano numer, będzie on niezdefiniowany, a zatem początkowo fałszywy, ale

80
00:06:48,510 --> 00:06:49,700
jeśli jest to

81
00:06:49,710 --> 00:06:56,450
prawda, jeśli wybrano numer, następnie ustawimy tutaj zawartość na ekran gry, a następnie wyrenderujemy wszystko, co

82
00:06:56,470 --> 00:07:01,370
jest na dole, i będzie to ekran gry lub ekran uruchamiania gry.

83
00:07:01,380 --> 00:07:07,350
Więc teraz, gdy klikniemy tutaj opcję Rozpocznij grę z innym wybranym, to powinno się tutaj przełączyć, jeśli i to jest

84
00:07:07,470 --> 00:07:09,110
ważne, jeśli upewnimy się,

85
00:07:09,210 --> 00:07:15,840
że można uruchomić program obsługi gry z poziomu ekranu początkowego gry. Teraz używamy domyślnego wzorca React, który przekazuje

86
00:07:15,840 --> 00:07:23,120
odwołanie do tego modułu obsługi do tego komponentu, być może w propie onStartGame, co brzmi

87
00:07:23,130 --> 00:07:28,200
dla mnie jak odpowiednia nazwa. Przekazujemy tutaj obsługę początkowej gry,

88
00:07:28,200 --> 00:07:34,350
tylko referencję bez nawiasów, tylko referencję, wskaźnik w tej funkcji, a onStartGame jest

89
00:07:34,740 --> 00:07:39,240
teraz właściwością, której możemy używać na ekranie startowym gry.

90
00:07:39,300 --> 00:07:46,410
Więc tutaj na ekranie startowym gry, kiedy klikniemy tutaj przycisk rozpoczęcia gry, chcę w końcu uruchomić ten

91
00:07:46,590 --> 00:07:47,370
rekwizyt.

92
00:07:47,370 --> 00:07:57,090
Więc tutaj mam onPress, a na końcu chcę uruchomić onStartGame i przesłać tutaj aktualnie wybrany numer, który

93
00:07:57,090 --> 00:08:01,440
jest zarządzany w stanie ekranu początkowego gry.

94
00:08:01,440 --> 00:08:08,310
Więc przesyłam to dalej do onStartGame, a onStartGame jest powiązany z programem obsługi gry startowej, który

95
00:08:08,370 --> 00:08:11,190
oczekuje, a następnie otrzymuje wybrany numer.

96
00:08:11,190 --> 00:08:16,690
W ten sposób upewniamy się, że kliknięcie tego przycisku, aby uruchomić ekran gry, uruchamia tę metodę lub tę

97
00:08:16,690 --> 00:08:17,700
funkcję tutaj,

98
00:08:17,700 --> 00:08:20,570
a po uruchomieniu tej funkcji ustawiamy numer użytkownika, dzięki czemu

99
00:08:20,580 --> 00:08:26,160
zawartość jest ekranem gry, dlatego powinniśmy zobaczyć ekran gry. Teraz brakującym elementem jest to,

100
00:08:26,160 --> 00:08:33,120
że na ekranie gry potrzebuję wyboru użytkownika, aby wygenerować moją początkową liczbę losową i wykluczyć ten

101
00:08:33,150 --> 00:08:38,130
wybór użytkowników dla pierwszej pierwszej liczby losowej, dlatego też musimy przekazać właściwość

102
00:08:38,130 --> 00:08:44,070
o nazwie wybór użytkownika na ekran gry. Możemy więc dodać tutaj propozycję wyboru użytkownika

103
00:08:44,070 --> 00:08:49,920
i przekazać numer użytkownika, którym jest stan, którym zarządzamy w komponencie aplikacji, czyli ten

104
00:08:49,920 --> 00:08:53,040
wybrany numer, który przechowujemy w tym miejscu tutaj,

105
00:08:53,040 --> 00:08:55,580
przekazujemy go do ekranu gry.

106
00:08:55,830 --> 00:09:02,280
Mam więc nadzieję, że przepływ danych jest czysty, pobieramy wybraną liczbę z ekranu startowego gry, gdy ten przycisk jest

107
00:09:02,280 --> 00:09:05,240
wciśnięty przycisk uruchamiania gry, a następnie przechowujemy

108
00:09:05,280 --> 00:09:10,440
go w stanie komponentu aplikacji tutaj w stanie użycia numeru z pomoc w ustawieniu

109
00:09:10,440 --> 00:09:16,170
numeru użytkownika, a następnie używamy tego numeru użytkownika, aby przekazać go do ekranu gry, który jest

110
00:09:16,170 --> 00:09:21,510
renderowany tylko wtedy, gdy mamy numery użytkowników, więc jeśli gra jest uruchomiona, jeśli gra została

111
00:09:21,510 --> 00:09:27,690
uruchomiona tak, że na ekranie gry, możemy użyć numeru użytkownika otrzymanego na proporze wyboru użytkownika, aby następnie wygenerować

112
00:09:27,780 --> 00:09:33,870
nowy numer losowy, który komputer zgadł, gdy ten wybór użytkownika, ten numer użytkownika jest wykluczony, tak że

113
00:09:33,870 --> 00:09:41,050
przy pierwszym zgadywaniu komputer nie może natychmiast zgadnij numer użytkownika. Dużo gadania, zachowajmy to wszystko i

114
00:09:41,050 --> 00:09:43,020
spójrzmy na to.

115
00:09:43,060 --> 00:09:50,660
Wpiszmy 55 i potwierdź i kliknij przycisk Rozpocznij grę, a my nie możemy znaleźć zmiennej w grze początkowej.

116
00:09:50,710 --> 00:09:57,820
Problem polega na tym, że wykonuję, tak, powinny to być rekwizyty przy uruchamianiu gry tutaj, przy przycisku

117
00:09:57,820 --> 00:10:03,080
uruchamiania gry w komponencie uruchamiania gry, ponieważ oczywiście jest to właściwość, którą

118
00:10:03,080 --> 00:10:05,270
otrzymujemy, nie jest to funkcja

119
00:10:05,380 --> 00:10:07,340
zdefiniowana tutaj, jest zdefiniowana

120
00:10:07,420 --> 00:10:10,500
na rekwizytach, to w końcu ten rekwizyt.

121
00:10:10,780 --> 00:10:12,990
Tak mała pomyłka, spróbujmy jeszcze raz

122
00:10:13,000 --> 00:10:15,330
po naprawieniu tego, kliknij przycisk Rozpocznij grę

123
00:10:15,430 --> 00:10:17,410
i to wygląda dobrze.

124
00:10:17,410 --> 00:10:18,620
Teraz widzimy, jak

125
00:10:18,620 --> 00:10:20,610
przeciwnicy zgadują i możemy podać kilka

126
00:10:20,620 --> 00:10:27,240
wskazówek, które w tej chwili nie mają żadnego efektu, ale które wkrótce będą miały efekt, dlatego jesteśmy na następnym ekranie,

127
00:10:27,250 --> 00:10:28,570
jesteśmy na ekranie gry.

128
00:10:28,570 --> 00:10:35,320
Teraz upewnijmy się, że naprawdę możemy dać temu komputerowi kilka wskazówek i upewnij się, że komputer ma

129
00:10:35,320 --> 00:10:38,740
szansę rozwiązać ten problem i zgadnąć nasz numer.