Czasami jednak po prostu nie można
uzyskać prawidłowego układu z procentową szerokością i tak zakodowanymi pikselami, czasami naprawdę trzeba wiedzieć,
ile pikseli jest
dostępnych, na przykład tutaj, na przyciskach, w których ustawiamy szerokość 100, ustawiamy 100 bez
względu na rozmiar urządzenia.
Teraz wiemy, że chcemy, aby dwa przyciski znajdowały się obok siebie.
Możemy więc po prostu upewnić się, że bierzemy szerokość przycisku, która zawsze pasuje do ekranu, bez względu na to, jak mały
jest on, i w
tym celu musimy dowiedzieć się, ile pikseli mamy dostępnych szerokości i to jest coś, co
możemy dowiedz się za pomocą React Native. Tam z React Native
możesz zaimportować tutaj obiekt wymiarów, wymiary to nazwa.
Teraz nie jest to komponent, którego używasz, zamiast tego jest to obiekt, który pozwala ci dowiedzieć
się, ile masz dostępnej szerokości.
Teraz możemy użyć tego na przykład tam, gdzie ustawiliśmy szerokość przycisku, zamiast ustawiać w
ten sposób, możemy ustawić naszą
szerokość na wymiary, a następnie istnieje metoda get, w której można uzyskać wymiary okna.
Możesz również pobrać
go z ekranu, różnica między oknem a ekranem ma znaczenie tylko w Androidzie, gdzie w przypadku okna wysokość paska stanu
zostanie wykluczona z obliczeń, a
zatem będzie to naprawdę, dobrze część ekranu,
na której będzie twoja treść żyć w.
Dlatego zwykle powinieneś używać okna tutaj, ponieważ w iOS nie
ma to znaczenia, w Androidzie jest gwarantowana ta część ekranu, w której naprawdę siedzi interfejs użytkownika bez tego paska
stanu u góry.
Dlatego zazwyczaj możesz użyć okna, aby uzyskać rzeczywiste pomieszczenie dostępne dla swojego układu, rzeczywiste
wymiary, których możesz użyć dla swojego układu. Teraz daje to obiekt, w którym można uzyskać
kilka właściwości, a dokładnie cztery - skalowanie czcionek skonfigurowane przez
użytkownika, więc na przykład, jeśli użytkownicy chcą mieć większe czcionki, możesz uzyskać mnożnik
tutaj za pomocą Skala czcionki,
ale co najważniejsze, otrzymujesz szerokość i wysokość, a jeśli otrzymamy szerokość tutaj, wówczas otrzymamy całkowitą szerokość
urządzenia, na
którym działa ta aplikacja.
Teraz wiemy, że chcemy w tym miejscu wcisnąć co najmniej dwa przyciski, abyśmy mogli po prostu podzielić
to przez dwa, aby teraz każdy przycisk był w połowie tak szeroki, jak urządzenie.
Teraz, jeśli to uratujemy, nie otrzymamy tak naprawdę pożądanego wyglądu, ponieważ jest on
zbyt duży, ale jeśli podzielimy to na przykład przez trzy, to już wygląda to lepiej na
małym ekranie, ale
nie na dużym, ale co powiesz na cztery Jeśli weźmiemy cztery, to mamy dużo miejsca
na całą pozostałą potrzebną przestrzeń, taką jak odstępy wokół naszego pojemnika i zapewniamy, że nasze przyciski zawsze szanują rozmiar urządzenia.
Oczywiście tutaj mógłbyś osiągnąć coś podobnego, ustawiając szerokość na wartość procentową, na przykład
40% tutaj, ale chciałem również wprowadzić tutaj API wymiarów, które będziemy wykorzystywać
później.
Jest to świetny interfejs API do sprawdzania, ile pikseli jest dostępnych na szerokości i wysokości
na urządzeniu
lub na którym działa, i to jest ważne, gdzie procent zawsze odnosi się do bezpośredniego widoku nadrzędnego,
a nie zawsze do dostępnej
szerokości urządzenia , tak jest w przypadku najwyższego
rodzica, że tak powiem, więc w najwyższym widoku, który renderujesz. Okno Pobierz wymiary zawsze podaje wymiary dla całego urządzenia, bez
względu na to, gdzie go używasz.
Zatem szerokość tutaj zawsze jest szerokością naszego ekranu na urządzeniu, a nigdy nadrzędnego ani niczego innego.
Może to być bardzo przydatne, jeśli chcesz stylizować coś w określony sposób lub
rozmiar w określony sposób, ponieważ mówi ci, ile szerokości masz do dyspozycji.