Teraz, jeśli przejdziemy do następnego ekranu, na którym mamy uruchomioną grę, napotkamy tam kolejny
problem. W
trybie portretowym wygląda dobrze, ale jeśli obrócimy urządzenie, nie będzie to wyglądać zbyt dobrze.
Teraz rozwiązaniem może być to, że zmienimy nieco stylizację, jeśli
nie będziemy mieli dostępnej wysokości.
Alternatywnie, renderujemy zupełnie inny układ w oparciu o dostępną przestrzeń,
obie byłyby dostępne opcje.
Możesz na przykład spróbować renderować to obok siebie, po prostu dodając tutaj na ekranie gry znak
„if”, w którym zwracasz zupełnie inny kod jsx, a może także z zupełnie inną
stylistyką, a zatem układem w oparciu o dostępną szerokość lub wysokość, a następnie wystarczy skonfigurować odbiornik, który ponownie
renderuje komponent, więc
ustaw scenę, tak jak zrobiliśmy to tutaj na ekranie startowym gry,
aby ponownie renderować komponent, ilekroć tak jest. Myślę, że byłoby to trochę interesujące i dlatego zrobię to tutaj.
Chcę zrobić, aby moje przyciski były renderowane po lewej i prawej stronie kontenera liczb, jeśli
mamy dostępną ograniczoną wysokość, i renderuj to tak, jak zawsze, jeśli
tak nie jest.
Chcę więc renderować zupełnie inny kod jsx na podstawie moich wymiarów.
Więc tutaj dodam opcję if i powiedzmy, czy wymiary uzyskują wysokość okna, powiedzmy, że jeśli jest mniejsza niż 500
i zobaczymy, czy ta wartość
działa, to chcę zwrócić w zasadzie ten
kod jsx z tego miejsca, więc „ Skopiuję to, umieść to między nawiasami, nawiasy, ale nie chcę mieć tutaj
karty, zamiast tego będę miał pierwszy główny przycisk przed kontenerem liczb, następny za kontenerem liczb
i będę miał wszystko tego w nowym widoku
tutaj, który to obejdę, co powinno ułożyć te trzy rzeczy z rzędu.
Więc dodam tutaj zupełnie nowy styl, style powiedzmy elementy sterujące lub cokolwiek, jak chcesz je nazwać, a teraz
dodam to do mojego arkusza stylów tutaj i to ten sam arkusz stylów
jak poprzednio, ponieważ po prostu konfiguruje style, których mogę używać w dowolnym miejscu komponent bez
względu na to, w jakich warunkach renderuję co i
tutaj ustawię ten kierunek wygięcia na wiersz, domyślnie jest to kolumna, a teraz chcemy mieć tutaj wiersz i ustawię
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
tak źle, wciąż
jest trochę do zrobienia, ale teraz dostaję to tutaj w trybie poziomym lub na urządzeniach o ograniczonej wysokości.
Na urządzeniach o większej wysokości
nadal mam tutaj stary widok, który jest dokładnie tym, czego chcę.
Teraz naprawmy ten widok tutaj i dlatego możemy po prostu przejść do elementów sterujących i
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
pojemnik z liczbami i dwa przyciski są wyśrodkowane pionowo. A teraz, jeśli spróbujemy tutaj jeszcze
raz, wejdziemy w to, wygląda to o wiele lepiej i działa tak samo jak poprzednio,
ale teraz mamy inny układ oparty na naszych wymiarach.
Teraz oczywiście problem polega na tym, że ten układ nie zmienia się, jeśli się obracamy, a nie
koniec świata, ale możemy chcieć wrócić do tego starego układu i dowiedziałeś
się, jak to działa, musimy tylko zarządzać tym za pomocą stanu i ustawić słuchacza.
Teraz mam już opcję useState i useEffect tutaj na ekranie gry, więc wszystko,
co musimy zrobić w naszym składniku ekranu gry, to zacząć od ustawienia tego stanu tutaj, a na koniec
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
urządzenia, po prostu ustawiamy szerokość wykrytego urządzenia, dlatego
możesz również nazwać tę wykrytą szerokość urządzenia.
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ę
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ść,
ale potrzebujemy również szerokości
to sprawdzenie tutaj, więc będziemy potrzebować obu.
Mamy więc dostępną szerokość urządzenia, a ja też zarządzam innym stanem,
czyli naszą
dostępną wysokością urządzenia, tutaj również ustawia
się dostępną wysokość urządzenia i dlatego
tutaj początkowo otrzymujemy dostępną wysokość urządzenia, a teraz
musimy zmienić oba, gdy nasze zmiany orientacji. W tym celu możemy użyć efektu na przykład tutaj, ustawić
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ń
i skonfiguruję funkcję, która powinna się uruchamiać, gdy to będzie w tym przypadku na przykład układ
aktualizacji jest pasującą nazwą, ponieważ dokładnie to robimy i
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,
aby wymiary uzyskały wysokość okna. Aktualizacja układu jest zatem funkcją wskazywaną przez
nasz detektor zdarzeń na wymiarach i tak jak poprzednio, potrzebujemy funkcji czyszczenia,
aby uniknąć niepotrzebnych renderów, a w tej funkcji po prostu używamy wymiarów usuwamy zmianę detektora zdarzeń,
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
urządzenia i dostępnej wysokości urządzenia.
Jeśli więc zaznaczę tutaj, używam dostępnej szerokości urządzenia, a tutaj, gdzie jestem
zainteresowany wysokością, używam dostępnej wysokości urządzenia. Jeśli teraz to zapiszemy, powinniśmy mieć układ, w którym
jeśli zaczniemy grę, mamy ten wygląd, ale jeśli przejdziemy do trybu poziomego, to się zmieni i oczywiście
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
i daje nam pożądany wygląd w oparciu o dostępną szerokość i wysokość, a także uwzględnia
zmiany w tym, gdy obracamy urządzenie.