A co ze
stylizacją, a co z tymi przyciskami? Teraz w przypadku tych
przycisków możesz zauważyć dziwne zachowanie, jeśli zapisałeś je
z powrotem w trybie portretu, również tutaj na Androidzie. Z drugiej strony, jeśli coś zmienimy i cofniemy, aby
aplikacja uruchomiła się ponownie i uruchomiliśmy w trybie portretowym, zobaczysz, że wygląda dobrze,
ale teraz, jeśli przejdziemy do trybu poziomego, znowu będzie wyglądał źle.
Zasadniczo szerokość naszych przycisków jest rejestrowana podczas uruchamiania aplikacji i nie dostosowuje się, gdy zmienia się rozmiar ekranu, i
oczywiście zmienia się, gdy obracamy urządzenie, ponieważ szerokość i wysokość są zamieniane, więc
mamy
większą szerokość, jeśli są w trybie poziomym niż w trybie pionowym.
Problem polega na tym, że obecnie na ekranie startowym gry, gdy ustawiamy szerokość naszych przycisków, które
tam robimy, używamy wymiarów get i to i to jest bardzo ważne, aby pamiętać, że
jest to obliczane tylko podczas uruchamiania aplikacji.
Gdy więc aplikacja uruchamia się po raz pierwszy, sprawdzana jest dostępna szerokość, a jeśli uruchamia
się
w trybie pionowym, to szerokość trybu pionowego, jeśli uruchamia się w trybie poziomym, jest
to szerokość trybu poziomego i loguje się po obróceniu urządzenia i obróceniu urządzenia nie zostanie ono ponownie obliczone.
Teraz oczywiście chcesz to przeliczyć i jest na to prosta poprawka.
Jeśli masz szerokość lub wysokość, cokolwiek otrzymujesz z wymiarów, które powinny uwzględniać zmiany orientacji, więc
które powinny być ponownie obliczane, gdy zmienia się orientacja, to nie powinieneś używać szerokości w dół
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
która powinna ponownie renderować interfejs użytkownika, gdy zmienia się on wraz ze stanem.
Tak więc tutaj, w początkowym ciągu
gry, mamy już useState, możemy teraz zarządzać także naszą szerokością przycisku, ustawić szerokość przycisku za pomocą useState
i zainicjować to do wymiarów, aby uzyskać szerokość okna podzieloną przez cztery,
co jest domyślnym początkiem.
Teraz możesz ustawić nasłuchiwanie tutaj na wymiarach, zamiast używać get przez wywołanie dodawania nasłuchiwania zdarzeń i nasłuchiwania
zdarzenia zmiany, które jest uruchamiane przy każdej zmianie wymiarów, co zwykle ma
miejsce, gdy użytkownik obraca urządzenie.
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,
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ą
chcę tu wywołać, więc
jest to układ aktualizacji, który chcę tu wywołać bez nawiasów, ponieważ chcemy po prostu
wskazać tę funkcję, aby wywołała nas, gdy zmienią się wymiary, a
to zapewni, że to uruchamia się ponownie za każdym razem, gdy zmieniają się
nasze wymiary, a zatem ten komponent zostanie zrenderowany.
Teraz musimy tylko upewnić się, że użyjemy tego dynamicznie ponownie obliczonego przycisku ze stanem tutaj.
Możemy to zrobić za pomocą stylów wbudowanych zamiast obiektu arkusza stylów.
Teraz, jeśli masz skonfigurowane inne style przycisku, które nie zależą od wymiarów, możesz oczywiście zostawić je
tutaj w arkuszu stylów, w tym
przypadku jednak tego nie mam, więc po prostu to skomentuję i możesz połączyć to
z niektórymi stylami wbudowanymi. Tutaj, ponieważ nie mamy
innych domyślnych stylów, po prostu zastąpię ten obiekt arkusza stylów, na który wskazujemy, wbudowanym obiektem stylu,
w którym ustawiam szerokość równą szerokości przycisku i robię to samo dla mojego drugiego przycisku, a przy
tym teraz mamy styl, który zmienia się za każdym razem, gdy obracamy urządzenie.
Więc jeśli to zapiszemy, zobaczysz, że teraz wygląda dobrze, bez
względu na to, jak to obrócimy, także na Androidzie, ponieważ zostanie to zrenderowane.
Teraz jedna ważna uwaga tutaj, w tej chwili w tej chwili konfiguruję tutaj grupę detektorów zdarzeń, zawsze
dodaję nowy detektor zdarzeń, ilekroć ten komponent zostanie zrenderowany, i to nie jest
to, co
chcę zrobić i możemy użyć efekt, który jest również wbudowany w React i którego powinieneś być świadomy, aby
mieć kod, który uruchamiamy przy każdym ponownym renderowaniu naszego komponentu.
Więc teraz mogę użyć efektu użycia tutaj, a funkcja, którą chcę uruchomić przy każdym ponownym renderowaniu, jest funkcją,
która ostatecznie tworzy tutaj tę funkcję układu aktualizacji i dodaje mój detektor
zdarzeń, więc wytnę to i dodam tutaj w funkcji efektu użycia, a jeśli
zwrócimy coś tutaj w użyciu efektu, to jest to nasza funkcja czyszczenia, która
działa tuż przed uruchomieniem efektu użycia i tam, chcę wyczyścić mojego detektora, ponieważ tutaj mogę następnie wywołać wymiary usunąć
zmianę detektora zdarzeń dla zaktualizuj układ.
Czyścimy to teraz i konfigurujemy nowy, gdy nasz komponent renderuje ponownie, czyści stary, konfiguruje
nowy i dlatego zawsze mamy tylko jeden działający detektor zdarzeń.
Jeśli zrobimy to w ten sposób, będzie to po prostu czystsze, a zatem jeśli teraz to zachowamy i
wrócimy, będziemy zachowywać się tak samo jak poprzednio, ale teraz w czysty sposób, wykorzystując useState i efekt
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
przeliczyć je ponownie, gdy się zmienią.