Więc teraz, po podjęciu pierwszych podstawowych kroków, jeśli teraz wypełnię numer i będziemy kontynuować, to wszystko
wygląda dobrze dla mnie tutaj,
to wszystko działa, jeśli teraz zaczniemy grę,
to chcę również zmniejszyć ten odstęp, który mamy tutaj i chcę również upewnić się, że moje pudełko
jest tam, więc ten dziennik zgadnięć, które mamy, że również
wygląda lepiej.
Teraz możemy to oczywiście zrobić na ekranie gry, ponieważ właśnie taki ekran
właśnie tam oglądamy.
Teraz, po pierwsze, jest to odstęp, ten górny margines na naszym dolnym pojemniku, którym jest ten pojemnik, górny margines to odległość
między liczbą tutaj a pojemnikiem i chcę to zmienić. Aby to zmienić, możemy ponownie
użyć
interfejsu API wymiarów.
Więc tutaj ponownie importuję wymiary z React Native, a teraz na
dole możemy obliczyć ten margines dynamicznie. Możemy tutaj ponownie uzyskać wymiary naszego okna, a następnie tutaj szerokość
lub w tym przypadku prawdopodobnie wysokość, a następnie podzielić to przez coś, ale byłoby
to bardzo uciążliwe, moglibyśmy na przykład podzielić przez 20 do 20 i zobacz, czy to dobrze wygląda, ale to naprawdę
gra polegająca na zgadywaniu, może nie być tym, czego naprawdę chcemy.
Zamiast tego moglibyśmy sprawdzić, ile mamy dostępnej wysokości, a następnie zastosować
inne odstępy na tej podstawie. Możemy sprawdzić, czy nasza wysokość jest powiedzmy większa niż 600, w takim przypadku
chcemy mieć odstęp 20, w przeciwnym razie mamy jeden z 10. Możemy więc również użyć wymiarów, które obliczamy
w warunku if, w tym przypadku w wyrażeniu potrójnym tutaj, ale możesz użyć
go również w normalnym przypadku check.
Więc teraz możemy wrócić tutaj i widzimy, że kiedy zaczynamy grę, nie mamy tak ogromnej luki tutaj
na mniejszym ekranie, na iPhonie, który jest większym ekranem, jednak zdecydowanie mamy większy odstęp
i aby to wyraźniej zobaczyć, możesz oczywiście się z tym pobawić
i na przykład użyć 30 dla mniejszych ekranów i 30 dla większych ekranów i 5 dla mniejszych ekranów,
a teraz zdecydowanie powinieneś to zobaczyć.
Tutaj mamy małą lukę,
a tutaj mamy większą lukę.
Możemy więc użyć tego również w warunkach.
Teraz ustawię z powrotem na 20 i 5, ale mam nadzieję, że teraz pokazuje jeszcze inny sposób
korzystania z tego.
Możesz użyć tego w warunkach, które oczywiście dają dużą elastyczność w przypadkach, gdy
nie chcesz używać szerokości w obliczeniach dynamicznych, ale masz różne zakodowane wartości, których chcesz użyć w oparciu
o różne punkty przerwania, które chcesz zestaw, trochę tak, jak znasz to z CSS, gdzie masz również zapytania
o media, a następnie możesz renderować różne rzeczy na podstawie różnych zapytań
o media.
Oczywiście nie jesteś ograniczony do używania API wymiarów w swoim arkuszu stylów, możesz go używać wszędzie tam, gdzie
możesz używać Javascript, więc zasadniczo wszędzie w swoich komponentach. Możesz również dołączyć zupełnie różne style w
zależności od dostępnej szerokości lub wysokości. Możemy również użyć okna Pobierz
wymiary tutaj, w którym przypisuję mój styl, i na przykład sprawdź tutaj moją wysokość, sprawdź, czy jest
ona większa niż 600, a jeśli tak jest, użyj kontenera przycisku stylów, a jeśli nie,
użyj kontenera przycisku stylów małego klasa. Nie mam go tutaj, więc się go pozbędę, ale jest to inny sposób
korzystania z niego, możesz go używać wszędzie tam, gdzie działa JavaScript. Możesz również oczywiście użyć go tutaj, możesz
sprawdzić if tutaj przed zwróceniem kodu jsx i sprawdzić, czy wysokość okna jest większa, jeśli jest większa niż 600, a jeśli
tak, powiedzmy, zwracasz zupełnie inny kod jsx, a zatem ten kod
nie będzie nigdy uruchamiany, jeśli wrócisz tutaj i tylko jeśli nie zrobisz tego, jeśli to sprawdzisz,
więc jeśli
masz urządzenie, które nie jest tak wysokie jak to, to zrobisz to tam.
Jesteś więc naprawdę elastyczny i wykorzystujesz tę elastyczność do tworzenia pożądanych układów, ponieważ właśnie o to
w tym wszystkim chodzi i daje dużo elastyczności twoim aplikacjom.
To jest odstęp
między nimi, teraz chciałem również zmienić moje elementy dziennika na dole,
to też oczywiście możemy łatwo zrobić.
Mamy tam nasze elementy listy i na elementach listy ustawiamy szerokość na 100%, ponieważ ustawiamy tutaj naszą szerokość
listy z kontenerem listy, a to jest ustawione na 60%.
Teraz 60% wygląda całkiem dobrze na większych urządzeniach, ale myślę,
że na mniejszych urządzeniach moglibyśmy pójść dalej.
Teraz możemy oczywiście spróbować rozwiązać ten problem, stosując różne reguły tutaj, w których ustawiamy maksymalną szerokość i minimalną
szerokość, a może też używamy API wymiarów do obliczenia tego dynamicznie lub ponownie używamy sprawdzania if.
Tutaj znów możemy powiedzieć, że wymiary mają okno, w tym przypadku uzyskają dostępną szerokość, a jeśli to
powiedzmy, że jest większe niż 500, to
chcę użyć 60%, w przeciwnym razie chcę użyć 80%. Teraz po prostu renderujemy szerszy, szerszy kontener listy w
oparciu o dostępną szerokość na urządzeniu,
na którym
pracujemy i używamy tutaj 350, może zamiast 500, ponieważ mówimy o szerokości,
a nie o wysokości.
Więc teraz, jeśli uruchomimy to na iPhonie, będziemy mieli taką samą szerokość jak poprzednio, ale na
mniejszym ekranie mamy większe przedmioty.
Tak też możemy zrobić i oczywiście możesz pobawić się punktem przerwania,
który skutecznie ustawiasz tutaj.
możesz wypróbować tutaj różne rozmiary punktów przerwania.
Oczywiście możesz również mieć wiele punktów
przerwania, możesz zagnieżdżać wyrażenia trójskładnikowe tutaj lub zanim napiszesz zbyt wiele wyrażeń zagnieżdżonych, po prostu skonfiguruj tutaj
różne obiekty stylów, które następnie załadujesz z różnymi, jeśli zostaną użyte czeki. Aby dać przykład, moglibyśmy mieć
duży pojemnik z listą tu i tam, ustawiamy flex jeden i ustawiamy
naszą szerokość, powiedzmy 80%, ponieważ jest to duży i
tutaj mamy normalny z 60% .
Teraz nie mam warunku if, ale mam dwa różne obiekty stylu
i teraz musimy tylko dołączyć różne obiekty
stylu tam, nie tutaj, ale tutaj, oczywiście, w tym widoku. Cóż, aby to zrobić, możemy po prostu ustawić tutaj zmienną stylu
kontenera listy i wskazać kontener listy stylów, który jest naszym domyślnym, ale następnie dodać tutaj sprawdzenie, czy sprawdzamy,
czy wymiary mają szerokość okna, a teraz, czy szerokość tutaj jest powiedzmy mniejszy niż 350, więc jeśli mamy małe urządzenie,
to chcemy mieć duży kontener listy, abyśmy mogli ustawić styl kontenera listy, ta
zmienna równa kontenerowi
stylów listy duży, aby wskazywał na
ten obiekt stylu, a teraz możemy użyć tego obiektu stylu tutaj w widoku, w którym
potrzebujemy stylu kontenera listy, używamy teraz zmiennej, która przechowuje inny obiekt stylu kontenera
listy w zależności od szerokości naszego urządzenia. A jeśli teraz to zapiszemy i uruchomimy
to ponownie, zobaczysz, że na iPhonie z większym urządzeniem, na którym mamy większą szerokość, mamy mniejszy pojemnik, a
tutaj na telefonie z Androidem z mniejszym urządzeniem, o mniejszej szerokości, otrzymujemy większy pojemnik.
Jest to taki sam wynik jak
poprzednio, ale nieco bardziej czytelny, a teraz moglibyśmy mieć wiele takich, jeśli sprawdzimy
tutaj, gdzie przechowujemy tutaj różne style w stylu
kontenera listy, którego następnie używamy, może to być bardziej czytelne niż zagnieżdżone wyrażenia trójskładnikowe tam w twoim obiekcie arkusza stylów.
W ten sposób możesz się z tym pogodzić i mieć świadomość, że API wymiarów
jest bardzo ważne.