1 00:00:02,830 --> 00:00:08,740 Teraz mieliśmy w tej aplikacji kolejny problem, ponieważ gdy wszystko zostanie tutaj rozwiązane, jeśli szybko 2 00:00:08,740 --> 00:00:12,200 tam pójdziemy, upewnij się, że rozwiązaliśmy ten problem, 3 00:00:12,220 --> 00:00:16,120 to mamy ten ekran i ten ekran też jest zepsuty. 4 00:00:16,120 --> 00:00:17,670 Mamy tutaj dwa 5 00:00:17,680 --> 00:00:23,190 problemy, po pierwsze, że ekran nie jest przewijany, co nie stanowiło problemu na większych 6 00:00:23,200 --> 00:00:29,050 urządzeniach, na których mamy większą wysokość, ale tutaj nie możemy wycisnąć całej zawartości na 7 00:00:29,050 --> 00:00:36,640 ekranie, więc możemy chcieć aby było możliwe przewijanie, aby być bezpiecznym i / lub alternatywnie, upewniamy się, że gwarantujemy zmieszczenie 8 00:00:36,640 --> 00:00:43,270 wszystkiego na ekranie i aby mieć pewność, że tak jest, musimy przejść do gry na ekranie i 9 00:00:43,270 --> 00:00:50,230 obliczyć tutaj nasze wysokości dynamicznie, szczególnie wysokość obrazu, którą teraz ustalamy na stałe do 300 pikseli, co jest 10 00:00:50,230 --> 00:00:52,810 zdecydowanie za duże na małym urządzeniu. 11 00:00:52,810 --> 00:00:55,950 Teraz, gdy już poznałeś rozwiązanie tego 12 00:00:56,050 --> 00:01:02,880 problemu, możemy ponownie użyć interfejsu API wymiarów, importując go z React Native, a po zaimportowaniu 13 00:01:02,890 --> 00:01:11,430 wymiarów możemy przejść do arkusza stylów i do kontenera obrazu, możemy teraz powiedzieć, że wymiary mają szerokość okna 14 00:01:12,150 --> 00:01:21,590 i powiedzmy teraz, że dla kontenera obrazu, dla obrazu tutaj chcemy mieć szerokość może 70% dostępnej szerokości i chcemy mieć taką 15 00:01:21,590 --> 00:01:24,860 samą wartość jak wysokość, więc po prostu 16 00:01:24,860 --> 00:01:25,920 skopiuję to. 17 00:01:25,920 --> 00:01:32,180 Ważne jest tutaj, że nie używamy wysokości, ponieważ obraz nie powinien wynosić 70% naszej dostępnej wysokości, 18 00:01:32,480 --> 00:01:32,960 zamiast 19 00:01:33,200 --> 00:01:38,390 tego powinien mieć taką samą wysokość jak szerokość i jest obliczany na 20 00:01:38,420 --> 00:01:45,260 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 21 00:01:45,380 --> 00:01:50,840 możemy użyć tego tutaj, a następnie podzielić go przez dwa i otrzymamy idealny promień granicy dla 22 00:01:50,900 --> 00:01:54,170 tej dynamicznie obliczanej szerokości. To jedna ważna rzecz. 23 00:01:54,200 --> 00:01:59,030 Teraz mamy też kilka innych rozmiarów, które konfigurujemy, na przykład margines w pionie, który ustaliliśmy 24 00:01:59,030 --> 00:02:07,600 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 25 00:02:07,600 --> 00:02:11,380 przypadku wysokość, i może podzielmy to przez 26 00:02:11,380 --> 00:02:21,010 powiedzmy 20 i zobaczmy, czy to wygląda dobrze, a także margines pionowy na dole, może podzielmy to przez 40, ponieważ 27 00:02:21,040 --> 00:02:26,720 było 15, to było 30, więc podzielmy to przez 40, jeśli podzielimy 28 00:02:26,740 --> 00:02:31,960 to przez 20, aby ponownie zachować tę samą relację między 29 00:02:31,960 --> 00:02:34,370 tymi dwoma pionami marginesów. 30 00:02:34,510 --> 00:02:35,980 Rozwiążmy to jeszcze 31 00:02:36,010 --> 00:02:41,150 raz i zobaczmy, jaki jest wynik, lepiej, teraz przynajmniej możemy zobaczyć 32 00:02:41,180 --> 00:02:44,100 przycisk, ale nadal nie jest idealny. 33 00:02:44,240 --> 00:02:50,150 Ten margines jest z pewnością wciąż zbyt duży, a także rozmiar czcionki, możemy to również zmniejszyć. 34 00:02:50,330 --> 00:02:56,570 Tak więc zaokrąglony obraz, z pewnością możemy podzielić wysokość przez 30 tutaj dla tego 35 00:02:56,570 --> 00:03:03,970 marginesu, który konfigurujemy, a następnie przejść do 60 dla tego pionowego marginesu pojemnika wynikowego i dla rozmiaru 36 00:03:04,130 --> 00:03:13,860 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 37 00:03:13,860 --> 00:03:25,210 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 38 00:03:25,210 --> 00:03:31,310 przy wszystkich poprawkach nadal nie będziemy w stanie dopasować go 39 00:03:31,310 --> 00:03:35,400 do ekranu, przynajmniej nie robiąc wszystkiego bardzo 40 00:03:35,510 --> 00:03:42,990 małym, możemy chcieć zaimportować ten zwój obejrzyj tutaj i zawiń nasz widok, 41 00:03:42,990 --> 00:03:50,730 więc dodaj widok przewijania dookoła naszego widoku, aby umożliwić przewijanie, a teraz spójrzmy 42 00:03:50,850 --> 00:03:52,860 na to ponownie, 43 00:03:52,880 --> 00:03:53,860 rozwiążmy 44 00:04:03,670 --> 00:04:10,700 to, teraz to wygląda lepiej. Pasuje do ekranu i gdybyśmy tego potrzebowali, moglibyśmy go 45 00:04:10,700 --> 00:04:14,090 również przewinąć, widzimy, że przy okazji iPhone'a, tam, jeśli 46 00:04:19,360 --> 00:04:22,390 to rozwiążemy, na iPhonie zawsze możemy trochę 47 00:04:22,390 --> 00:04:27,010 przewinąć i odbija się wstecz, mamy włączone przewijanie i dlatego teraz wygląda 48 00:04:27,040 --> 00:04:32,920 to dobrze na iPhonie, ale także na tym urządzeniu, na którym nieco zmniejszamy rozmiar czcionki, 49 00:04:33,070 --> 00:04:36,420 pracowaliśmy trochę nad odstępami i jeśli przekroczyłby nasze 50 00:04:36,520 --> 00:04:45,760 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 51 00:04:45,760 --> 00:04:52,250 nam budować interfejsy użytkownika, które wyglądają dobrze na różnych rozmiarach urządzeń. Jak się dowiedziałeś, istnieją różne sposoby 52 00:04:52,250 --> 00:04:59,230 korzystania z niego - do dynamicznego obliczania rozmiarów, takich jak szerokość lub wysokość lub marginesy i oczywiście również 53 00:04:59,440 --> 00:05:05,710 w instrukcjach if, aby po prostu renderować różne treści, dołączać różne style lub różne obiekty stylów 54 00:05:05,710 --> 00:05:10,750 w oparciu o warunki szerokości lub wysokości, które tu konfigurujesz, ale to nie 55 00:05:10,750 --> 00:05:16,180 wszystko, ponieważ użytkownicy mogą również zmieniać orientację urządzenia podczas działania aplikacji i to czasami 56 00:05:16,180 --> 00:05:20,440 oznacza również, że musimy zmienić styl i / lub układ.