1
00:00:02,400 --> 00:00:09,500
Teraz, jeśli przejdziemy do następnego ekranu, na którym mamy uruchomioną grę, napotkamy tam kolejny

2
00:00:09,520 --> 00:00:10,610
problem. W

3
00:00:10,610 --> 00:00:15,680
trybie portretowym wygląda dobrze, ale jeśli obrócimy urządzenie, nie będzie to wyglądać zbyt dobrze.

4
00:00:15,680 --> 00:00:20,520
Teraz rozwiązaniem może być to, że zmienimy nieco stylizację, jeśli

5
00:00:20,570 --> 00:00:23,320
nie będziemy mieli dostępnej wysokości.

6
00:00:23,420 --> 00:00:28,150
Alternatywnie, renderujemy zupełnie inny układ w oparciu o dostępną przestrzeń,

7
00:00:28,220 --> 00:00:30,470
obie byłyby dostępne opcje.

8
00:00:30,470 --> 00:00:36,920
Możesz na przykład spróbować renderować to obok siebie, po prostu dodając tutaj na ekranie gry znak

9
00:00:36,920 --> 00:00:42,620
„if”, w którym zwracasz zupełnie inny kod jsx, a może także z zupełnie inną

10
00:00:42,620 --> 00:00:49,820
stylistyką, a zatem układem w oparciu o dostępną szerokość lub wysokość, a następnie wystarczy skonfigurować odbiornik, który ponownie

11
00:00:49,820 --> 00:00:51,200
renderuje komponent, więc

12
00:00:51,200 --> 00:00:56,150
ustaw scenę, tak jak zrobiliśmy to tutaj na ekranie startowym gry,

13
00:00:56,150 --> 00:01:02,560
aby ponownie renderować komponent, ilekroć tak jest. Myślę, że byłoby to trochę interesujące i dlatego zrobię to tutaj.

14
00:01:02,570 --> 00:01:08,740
Chcę zrobić, aby moje przyciski były renderowane po lewej i prawej stronie kontenera liczb, jeśli

15
00:01:08,740 --> 00:01:13,370
mamy dostępną ograniczoną wysokość, i renderuj to tak, jak zawsze, jeśli

16
00:01:13,390 --> 00:01:15,160
tak nie jest.

17
00:01:15,460 --> 00:01:20,560
Chcę więc renderować zupełnie inny kod jsx na podstawie moich wymiarów.

18
00:01:20,560 --> 00:01:30,540
Więc tutaj dodam opcję if i powiedzmy, czy wymiary uzyskują wysokość okna, powiedzmy, że jeśli jest mniejsza niż 500

19
00:01:30,670 --> 00:01:33,850
i zobaczymy, czy ta wartość

20
00:01:33,850 --> 00:01:37,770
działa, to chcę zwrócić w zasadzie ten

21
00:01:37,860 --> 00:01:47,770
kod jsx z tego miejsca, więc „ Skopiuję to, umieść to między nawiasami, nawiasy, ale nie chcę mieć tutaj

22
00:01:47,770 --> 00:01:55,390
karty, zamiast tego będę miał pierwszy główny przycisk przed kontenerem liczb, następny za kontenerem liczb

23
00:01:55,390 --> 00:01:59,530
i będę miał wszystko tego w nowym widoku

24
00:02:02,410 --> 00:02:09,000
tutaj, który to obejdę, co powinno ułożyć te trzy rzeczy z rzędu.

25
00:02:09,010 --> 00:02:16,180
Więc dodam tutaj zupełnie nowy styl, style powiedzmy elementy sterujące lub cokolwiek, jak chcesz je nazwać, a teraz

26
00:02:16,300 --> 00:02:21,400
dodam to do mojego arkusza stylów tutaj i to ten sam arkusz stylów

27
00:02:21,400 --> 00:02:27,460
jak poprzednio, ponieważ po prostu konfiguruje style, których mogę używać w dowolnym miejscu komponent bez

28
00:02:27,460 --> 00:02:31,540
względu na to, w jakich warunkach renderuję co i

29
00:02:31,540 --> 00:02:38,890
tutaj ustawię ten kierunek wygięcia na wiersz, domyślnie jest to kolumna, a teraz chcemy mieć tutaj wiersz i ustawię

30
00:02:39,070 --> 00:02:48,360
justowanie zawartości do przestrzeni wokół i zobaczymy, jak to wygląda jak. Jeśli teraz to zapiszemy i zaczniemy nową grę tutaj w trybie poziomym, nie wygląda to

31
00:02:48,390 --> 00:02:49,470
tak źle, wciąż

32
00:02:49,470 --> 00:02:54,690
jest trochę do zrobienia, ale teraz dostaję to tutaj w trybie poziomym lub na urządzeniach o ograniczonej wysokości.

33
00:02:55,350 --> 00:02:57,370
Na urządzeniach o większej wysokości

34
00:02:57,480 --> 00:03:01,530
nadal mam tutaj stary widok, który jest dokładnie tym, czego chcę.

35
00:03:01,620 --> 00:03:08,260
Teraz naprawmy ten widok tutaj i dlatego możemy po prostu przejść do elementów sterujących i

36
00:03:08,260 --> 00:03:16,340
podać szerokość, powiedzmy 80%, aby ogólny pojemnik był większy i bardzo ważny, ustaw wyrównywanie przedmiotów tutaj, aby wyśrodkować, aby

37
00:03:16,340 --> 00:03:24,340
pojemnik z liczbami i dwa przyciski są wyśrodkowane pionowo. A teraz, jeśli spróbujemy tutaj jeszcze

38
00:03:24,340 --> 00:03:33,560
raz, wejdziemy w to, wygląda to o wiele lepiej i działa tak samo jak poprzednio,

39
00:03:33,560 --> 00:03:38,950
ale teraz mamy inny układ oparty na naszych wymiarach.

40
00:03:38,990 --> 00:03:44,960
Teraz oczywiście problem polega na tym, że ten układ nie zmienia się, jeśli się obracamy, a nie

41
00:03:45,050 --> 00:03:49,560
koniec świata, ale możemy chcieć wrócić do tego starego układu i dowiedziałeś

42
00:03:49,670 --> 00:03:54,690
się, jak to działa, musimy tylko zarządzać tym za pomocą stanu i ustawić słuchacza.

43
00:03:54,690 --> 00:04:00,200
Teraz mam już opcję useState i useEffect tutaj na ekranie gry, więc wszystko,

44
00:04:00,200 --> 00:04:08,180
co musimy zrobić w naszym składniku ekranu gry, to zacząć od ustawienia tego stanu tutaj, a na koniec

45
00:04:08,370 --> 00:04:18,370
chcemy tutaj zarządzać szerokością urządzenia, która zmienia się w czasie, może nazwać tę dostępną szerokość urządzenia, aby było jasne, że nie ustawiamy tutaj szerokości

46
00:04:18,370 --> 00:04:21,960
urządzenia, po prostu ustawiamy szerokość wykrytego urządzenia, dlatego

47
00:04:22,030 --> 00:04:25,370
możesz również nazwać tę wykrytą szerokość urządzenia.

48
00:04:25,450 --> 00:04:34,090
Podam nazwę dostępnej szerokości urządzenia i ustawię dostępną szerokość urządzenia. Zarządzam tym za pomocą useState, gdzie używam wymiarów, uzyskuję

49
00:04:34,090 --> 00:04:43,930
szerokość okna, aby uzyskać dostępną szerokość urządzenia i oczywiście, po prostu rozpoznałem, że to źle, interesuje nas wysokość, a nie szerokość,

50
00:04:43,930 --> 00:04:46,480
ale potrzebujemy również szerokości

51
00:04:49,520 --> 00:04:52,850
to sprawdzenie tutaj, więc będziemy potrzebować obu.

52
00:04:53,300 --> 00:04:59,250
Mamy więc dostępną szerokość urządzenia, a ja też zarządzam innym stanem,

53
00:04:59,270 --> 00:05:00,560
czyli naszą

54
00:05:00,560 --> 00:05:03,990
dostępną wysokością urządzenia, tutaj również ustawia

55
00:05:04,000 --> 00:05:07,300
się dostępną wysokość urządzenia i dlatego

56
00:05:07,300 --> 00:05:11,700
tutaj początkowo otrzymujemy dostępną wysokość urządzenia, a teraz

57
00:05:11,710 --> 00:05:19,710
musimy zmienić oba, gdy nasze zmiany orientacji. W tym celu możemy użyć efektu na przykład tutaj, ustawić

58
00:05:19,710 --> 00:05:29,310
funkcję, która będzie uruchamiana za każdym razem, gdy nasz komponent renderuje, a tutaj w tej funkcji skonfiguruję wymiary, dodam detektor zdarzeń, posłucham zmian zdarzeń

59
00:05:29,330 --> 00:05:35,810
i skonfiguruję funkcję, która powinna się uruchamiać, gdy to będzie w tym przypadku na przykład układ

60
00:05:35,810 --> 00:05:39,720
aktualizacji jest pasującą nazwą, ponieważ dokładnie to robimy i

61
00:05:39,850 --> 00:05:51,420
tam nazywam ustaw szerokość dostępnego urządzenia i ustawiam to na wymiary, aby uzyskać okno. szerokość i oczywiście również ustaw dostępną wysokość urządzenia,

62
00:05:51,420 --> 00:05:59,410
aby wymiary uzyskały wysokość okna. Aktualizacja układu jest zatem funkcją wskazywaną przez

63
00:05:59,410 --> 00:06:05,680
nasz detektor zdarzeń na wymiarach i tak jak poprzednio, potrzebujemy funkcji czyszczenia,

64
00:06:06,010 --> 00:06:14,080
aby uniknąć niepotrzebnych renderów, a w tej funkcji po prostu używamy wymiarów usuwamy zmianę detektora zdarzeń,

65
00:06:14,170 --> 00:06:23,010
gdy wskazujemy na układ aktualizacji, a my 'Jest dobry. Teraz musimy po prostu użyć tutaj naszych dwóch stanów - dostępnej szerokości

66
00:06:23,040 --> 00:06:25,390
urządzenia i dostępnej wysokości urządzenia.

67
00:06:25,500 --> 00:06:32,190
Jeśli więc zaznaczę tutaj, używam dostępnej szerokości urządzenia, a tutaj, gdzie jestem

68
00:06:32,220 --> 00:06:40,170
zainteresowany wysokością, używam dostępnej wysokości urządzenia. Jeśli teraz to zapiszemy, powinniśmy mieć układ, w którym

69
00:06:40,170 --> 00:06:47,070
jeśli zaczniemy grę, mamy ten wygląd, ale jeśli przejdziemy do trybu poziomego, to się zmieni i oczywiście

70
00:06:47,070 --> 00:06:55,830
zmieni go, jeśli zajdzie taka potrzeba. Tutaj na iOS mamy ten wygląd i mamy ten wygląd, jeśli się obracamy. Teraz wygląda to naprawdę dobrze

71
00:06:55,830 --> 00:07:03,500
i daje nam pożądany wygląd w oparciu o dostępną szerokość i wysokość, a także uwzględnia

72
00:07:03,510 --> 00:07:06,960
zmiany w tym, gdy obracamy urządzenie.