Teraz mieliśmy w tej aplikacji kolejny problem, ponieważ gdy wszystko zostanie tutaj rozwiązane, jeśli szybko
tam pójdziemy, upewnij się, że rozwiązaliśmy ten problem,
to mamy ten ekran i ten ekran też jest zepsuty.
Mamy tutaj dwa
problemy, po pierwsze, że ekran nie jest przewijany, co nie stanowiło problemu na większych
urządzeniach, na których mamy większą wysokość, ale tutaj nie możemy wycisnąć całej zawartości na
ekranie, więc możemy chcieć aby było możliwe przewijanie, aby być bezpiecznym i / lub alternatywnie, upewniamy się, że gwarantujemy zmieszczenie
wszystkiego na ekranie i aby mieć pewność, że tak jest, musimy przejść do gry na ekranie i
obliczyć tutaj nasze wysokości dynamicznie, szczególnie wysokość obrazu, którą teraz ustalamy na stałe do 300 pikseli, co jest
zdecydowanie za duże na małym urządzeniu.
Teraz, gdy już poznałeś rozwiązanie tego
problemu, możemy ponownie użyć interfejsu API wymiarów, importując go z React Native, a po zaimportowaniu
wymiarów możemy przejść do arkusza stylów i do kontenera obrazu, możemy teraz powiedzieć, że wymiary mają szerokość okna
i powiedzmy teraz, że dla kontenera obrazu, dla obrazu tutaj chcemy mieć szerokość może 70% dostępnej szerokości i chcemy mieć taką
samą wartość jak wysokość, więc po prostu
skopiuję to.
Ważne jest tutaj, że nie używamy wysokości, ponieważ obraz nie powinien wynosić 70% naszej dostępnej wysokości,
zamiast
tego powinien mieć taką samą wysokość jak szerokość i jest obliczany na
szerokości urządzenia, więc używamy szerokości na dole także. Teraz tutaj promień krawędzi powinien być o połowę mniejszy, więc
możemy użyć tego tutaj, a następnie podzielić go przez dwa i otrzymamy idealny promień granicy dla
tej dynamicznie obliczanej szerokości. To jedna ważna rzecz.
Teraz mamy też kilka innych rozmiarów, które konfigurujemy, na przykład margines w pionie, który ustaliliśmy
na 30, to samo dla pojemnika z wynikami i możemy to również zmienić. Możemy więc powiedzieć, że wymiary mają okno, w tym
przypadku wysokość, i może podzielmy to przez
powiedzmy 20 i zobaczmy, czy to wygląda dobrze, a także margines pionowy na dole, może podzielmy to przez 40, ponieważ
było 15, to było 30, więc podzielmy to przez 40, jeśli podzielimy
to przez 20, aby ponownie zachować tę samą relację między
tymi dwoma pionami marginesów.
Rozwiążmy to jeszcze
raz i zobaczmy, jaki jest wynik, lepiej, teraz przynajmniej możemy zobaczyć
przycisk, ale nadal nie jest idealny.
Ten margines jest z pewnością wciąż zbyt duży, a także rozmiar czcionki, możemy to również zmniejszyć.
Tak więc zaokrąglony obraz, z pewnością możemy podzielić wysokość przez 30 tutaj dla tego
marginesu, który konfigurujemy, a następnie przejść do 60 dla tego pionowego marginesu pojemnika wynikowego i dla rozmiaru
czcionki tutaj, tutaj możemy użyć sprawdzania, czy chcemy i na przykład sprawdź naszą dostępną wysokość tutaj, a jeśli to powiedzmy, że jest
mniejsza niż 400, wówczas używamy 16, a w przeciwnym razie używamy 20. Wreszcie, aby upewnić się, że możemy przewijać, ponieważ czasami
przy wszystkich poprawkach nadal nie będziemy w stanie dopasować go
do ekranu, przynajmniej nie robiąc wszystkiego bardzo
małym, możemy chcieć zaimportować ten zwój obejrzyj tutaj i zawiń nasz widok,
więc dodaj widok przewijania dookoła naszego widoku, aby umożliwić przewijanie, a teraz spójrzmy
na to ponownie,
rozwiążmy
to, teraz to wygląda lepiej. Pasuje do ekranu i gdybyśmy tego potrzebowali, moglibyśmy go
również przewinąć, widzimy, że przy okazji iPhone'a, tam, jeśli
to rozwiążemy, na iPhonie zawsze możemy trochę
przewinąć i odbija się wstecz, mamy włączone przewijanie i dlatego teraz wygląda
to dobrze na iPhonie, ale także na tym urządzeniu, na którym nieco zmniejszamy rozmiar czcionki,
pracowaliśmy trochę nad odstępami i jeśli przekroczyłby nasze
granice, moglibyśmy przewiń, abyśmy zawsze mogli wchodzić w interakcje z naszą grą. To jest tutaj interfejs API wymiarów, a interfejs API wymiarów naprawdę pomaga
nam budować interfejsy użytkownika, które wyglądają dobrze na różnych rozmiarach urządzeń. Jak się dowiedziałeś, istnieją różne sposoby
korzystania z niego - do dynamicznego obliczania rozmiarów, takich jak szerokość lub wysokość lub marginesy i oczywiście również
w instrukcjach if, aby po prostu renderować różne treści, dołączać różne style lub różne obiekty stylów
w oparciu o warunki szerokości lub wysokości, które tu konfigurujesz, ale to nie
wszystko, ponieważ użytkownicy mogą również zmieniać orientację urządzenia podczas działania aplikacji i to czasami
oznacza również, że musimy zmienić styl i / lub układ.