1
00:00:02,130 --> 00:00:03,280
A co ze

2
00:00:03,280 --> 00:00:07,130
stylizacją, a co z tymi przyciskami? Teraz w przypadku tych

3
00:00:07,130 --> 00:00:10,600
przycisków możesz zauważyć dziwne zachowanie, jeśli zapisałeś je

4
00:00:10,610 --> 00:00:18,600
z powrotem w trybie portretu, również tutaj na Androidzie. Z drugiej strony, jeśli coś zmienimy i cofniemy, aby

5
00:00:18,690 --> 00:00:24,000
aplikacja uruchomiła się ponownie i uruchomiliśmy w trybie portretowym, zobaczysz, że wygląda dobrze,

6
00:00:24,000 --> 00:00:28,240
ale teraz, jeśli przejdziemy do trybu poziomego, znowu będzie wyglądał źle.

7
00:00:28,260 --> 00:00:36,060
Zasadniczo szerokość naszych przycisków jest rejestrowana podczas uruchamiania aplikacji i nie dostosowuje się, gdy zmienia się rozmiar ekranu, i

8
00:00:36,060 --> 00:00:41,670
oczywiście zmienia się, gdy obracamy urządzenie, ponieważ szerokość i wysokość są zamieniane, więc

9
00:00:41,670 --> 00:00:42,320
mamy

10
00:00:42,330 --> 00:00:47,280
większą szerokość, jeśli są w trybie poziomym niż w trybie pionowym.

11
00:00:47,280 --> 00:00:53,730
Problem polega na tym, że obecnie na ekranie startowym gry, gdy ustawiamy szerokość naszych przycisków, które

12
00:00:53,730 --> 00:00:59,970
tam robimy, używamy wymiarów get i to i to jest bardzo ważne, aby pamiętać, że

13
00:00:59,970 --> 00:01:02,970
jest to obliczane tylko podczas uruchamiania aplikacji.

14
00:01:02,970 --> 00:01:08,220
Gdy więc aplikacja uruchamia się po raz pierwszy, sprawdzana jest dostępna szerokość, a jeśli uruchamia

15
00:01:08,220 --> 00:01:08,910
się

16
00:01:08,910 --> 00:01:13,980
w trybie pionowym, to szerokość trybu pionowego, jeśli uruchamia się w trybie poziomym, jest

17
00:01:13,980 --> 00:01:20,390
to szerokość trybu poziomego i loguje się po obróceniu urządzenia i obróceniu urządzenia nie zostanie ono ponownie obliczone.

18
00:01:20,550 --> 00:01:25,970
Teraz oczywiście chcesz to przeliczyć i jest na to prosta poprawka.

19
00:01:26,100 --> 00:01:33,530
Jeśli masz szerokość lub wysokość, cokolwiek otrzymujesz z wymiarów, które powinny uwzględniać zmiany orientacji, więc

20
00:01:33,570 --> 00:01:41,430
które powinny być ponownie obliczane, gdy zmienia się orientacja, to nie powinieneś używać szerokości w dół

21
00:01:41,430 --> 00:01:50,250
tam w arkuszu stylów, ale zamiast tego musisz zarządzać szerokością lub dowolna właściwość, która może zmieniać się dynamicznie i

22
00:01:50,570 --> 00:01:57,230
która powinna ponownie renderować interfejs użytkownika, gdy zmienia się on wraz ze stanem.

23
00:01:57,230 --> 00:02:00,960
Tak więc tutaj, w początkowym ciągu

24
00:02:01,130 --> 00:02:11,470
gry, mamy już useState, możemy teraz zarządzać także naszą szerokością przycisku, ustawić szerokość przycisku za pomocą useState

25
00:02:11,500 --> 00:02:18,290
i zainicjować to do wymiarów, aby uzyskać szerokość okna podzieloną przez cztery,

26
00:02:18,300 --> 00:02:21,220
co jest domyślnym początkiem.

27
00:02:21,330 --> 00:02:27,660
Teraz możesz ustawić nasłuchiwanie tutaj na wymiarach, zamiast używać get przez wywołanie dodawania nasłuchiwania zdarzeń i nasłuchiwania

28
00:02:28,020 --> 00:02:32,640
zdarzenia zmiany, które jest uruchamiane przy każdej zmianie wymiarów, co zwykle ma

29
00:02:32,640 --> 00:02:35,000
miejsce, gdy użytkownik obraca urządzenie.

30
00:02:35,010 --> 00:02:43,950
Więc tutaj możemy ustawić funkcję, zaktualizować układ, na przykład, która jest funkcją, w której wywołuję przycisk ustawiania szerokości i ustawiam go ponownie tutaj,

31
00:02:43,950 --> 00:02:50,760
ale szerokość wymiarów będzie się różnić w zależności od szerokości ekranu podczas obracania to jest ta funkcja, którą

32
00:02:50,760 --> 00:02:52,470
chcę tu wywołać, więc

33
00:02:52,470 --> 00:02:58,020
jest to układ aktualizacji, który chcę tu wywołać bez nawiasów, ponieważ chcemy po prostu

34
00:02:58,020 --> 00:03:02,430
wskazać tę funkcję, aby wywołała nas, gdy zmienią się wymiary, a

35
00:03:02,460 --> 00:03:07,530
to zapewni, że to uruchamia się ponownie za każdym razem, gdy zmieniają się

36
00:03:07,830 --> 00:03:11,160
nasze wymiary, a zatem ten komponent zostanie zrenderowany.

37
00:03:11,160 --> 00:03:16,100
Teraz musimy tylko upewnić się, że użyjemy tego dynamicznie ponownie obliczonego przycisku ze stanem tutaj.

38
00:03:16,230 --> 00:03:20,130
Możemy to zrobić za pomocą stylów wbudowanych zamiast obiektu arkusza stylów.

39
00:03:20,130 --> 00:03:25,770
Teraz, jeśli masz skonfigurowane inne style przycisku, które nie zależą od wymiarów, możesz oczywiście zostawić je

40
00:03:25,770 --> 00:03:28,170
tutaj w arkuszu stylów, w tym

41
00:03:28,170 --> 00:03:32,910
przypadku jednak tego nie mam, więc po prostu to skomentuję i możesz połączyć to

42
00:03:32,910 --> 00:03:36,120
z niektórymi stylami wbudowanymi. Tutaj, ponieważ nie mamy

43
00:03:36,120 --> 00:03:41,550
innych domyślnych stylów, po prostu zastąpię ten obiekt arkusza stylów, na który wskazujemy, wbudowanym obiektem stylu,

44
00:03:41,550 --> 00:03:47,070
w którym ustawiam szerokość równą szerokości przycisku i robię to samo dla mojego drugiego przycisku, a przy

45
00:03:47,130 --> 00:03:51,390
tym teraz mamy styl, który zmienia się za każdym razem, gdy obracamy urządzenie.

46
00:03:51,390 --> 00:03:55,550
Więc jeśli to zapiszemy, zobaczysz, że teraz wygląda dobrze, bez

47
00:03:55,550 --> 00:04:00,350
względu na to, jak to obrócimy, także na Androidzie, ponieważ zostanie to zrenderowane.

48
00:04:00,570 --> 00:04:07,050
Teraz jedna ważna uwaga tutaj, w tej chwili w tej chwili konfiguruję tutaj grupę detektorów zdarzeń, zawsze

49
00:04:07,050 --> 00:04:11,670
dodaję nowy detektor zdarzeń, ilekroć ten komponent zostanie zrenderowany, i to nie jest

50
00:04:11,670 --> 00:04:12,500
to, co

51
00:04:12,720 --> 00:04:19,320
chcę zrobić i możemy użyć efekt, który jest również wbudowany w React i którego powinieneś być świadomy, aby

52
00:04:19,410 --> 00:04:23,540
mieć kod, który uruchamiamy przy każdym ponownym renderowaniu naszego komponentu.

53
00:04:23,620 --> 00:04:31,020
Więc teraz mogę użyć efektu użycia tutaj, a funkcja, którą chcę uruchomić przy każdym ponownym renderowaniu, jest funkcją,

54
00:04:31,020 --> 00:04:36,210
która ostatecznie tworzy tutaj tę funkcję układu aktualizacji i dodaje mój detektor

55
00:04:36,270 --> 00:04:41,580
zdarzeń, więc wytnę to i dodam tutaj w funkcji efektu użycia, a jeśli

56
00:04:41,580 --> 00:04:46,950
zwrócimy coś tutaj w użyciu efektu, to jest to nasza funkcja czyszczenia, która

57
00:04:46,950 --> 00:04:54,940
działa tuż przed uruchomieniem efektu użycia i tam, chcę wyczyścić mojego detektora, ponieważ tutaj mogę następnie wywołać wymiary usunąć

58
00:04:54,950 --> 00:04:57,900
zmianę detektora zdarzeń dla zaktualizuj układ.

59
00:04:57,900 --> 00:05:02,840
Czyścimy to teraz i konfigurujemy nowy, gdy nasz komponent renderuje ponownie, czyści stary, konfiguruje

60
00:05:02,840 --> 00:05:06,610
nowy i dlatego zawsze mamy tylko jeden działający detektor zdarzeń.

61
00:05:06,770 --> 00:05:13,350
Jeśli zrobimy to w ten sposób, będzie to po prostu czystsze, a zatem jeśli teraz to zachowamy i

62
00:05:13,350 --> 00:05:19,650
wrócimy, będziemy zachowywać się tak samo jak poprzednio, ale teraz w czysty sposób, wykorzystując useState i efekt

63
00:05:19,950 --> 00:05:26,370
użycia, a co najważniejsze, możliwości nasłuchiwania zdarzeń API wymiarów, które pozwalają nam nie tylko ustawić wymiary raz, ale

64
00:05:26,610 --> 00:05:29,040
przeliczyć je ponownie, gdy się zmienią.