1
00:00:02,220 --> 00:00:08,250
Więc teraz, po podjęciu pierwszych podstawowych kroków, jeśli teraz wypełnię numer i będziemy kontynuować, to wszystko

2
00:00:08,250 --> 00:00:10,330
wygląda dobrze dla mnie tutaj,

3
00:00:10,420 --> 00:00:12,980
to wszystko działa, jeśli teraz zaczniemy grę,

4
00:00:12,990 --> 00:00:19,560
to chcę również zmniejszyć ten odstęp, który mamy tutaj i chcę również upewnić się, że moje pudełko

5
00:00:19,560 --> 00:00:23,240
jest tam, więc ten dziennik zgadnięć, które mamy, że również

6
00:00:23,250 --> 00:00:24,490
wygląda lepiej.

7
00:00:25,050 --> 00:00:29,820
Teraz możemy to oczywiście zrobić na ekranie gry, ponieważ właśnie taki ekran

8
00:00:29,820 --> 00:00:31,350
właśnie tam oglądamy.

9
00:00:31,410 --> 00:00:37,410
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ść

10
00:00:37,590 --> 00:00:43,370
między liczbą tutaj a pojemnikiem i chcę to zmienić. Aby to zmienić, możemy ponownie

11
00:00:43,510 --> 00:00:44,720
użyć

12
00:00:44,760 --> 00:00:47,120
interfejsu API wymiarów.

13
00:00:47,280 --> 00:00:54,300
Więc tutaj ponownie importuję wymiary z React Native, a teraz na

14
00:00:54,510 --> 00:01:03,630
dole możemy obliczyć ten margines dynamicznie. Możemy tutaj ponownie uzyskać wymiary naszego okna, a następnie tutaj szerokość

15
00:01:03,870 --> 00:01:09,630
lub w tym przypadku prawdopodobnie wysokość, a następnie podzielić to przez coś, ale byłoby

16
00:01:09,630 --> 00:01:17,430
to bardzo uciążliwe, moglibyśmy na przykład podzielić przez 20 do 20 i zobacz, czy to dobrze wygląda, ale to naprawdę

17
00:01:17,430 --> 00:01:21,990
gra polegająca na zgadywaniu, może nie być tym, czego naprawdę chcemy.

18
00:01:22,230 --> 00:01:28,320
Zamiast tego moglibyśmy sprawdzić, ile mamy dostępnej wysokości, a następnie zastosować

19
00:01:28,320 --> 00:01:34,920
inne odstępy na tej podstawie. Możemy sprawdzić, czy nasza wysokość jest powiedzmy większa niż 600, w takim przypadku

20
00:01:35,310 --> 00:01:41,490
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

21
00:01:41,490 --> 00:01:46,920
w warunku if, w tym przypadku w wyrażeniu potrójnym tutaj, ale możesz użyć

22
00:01:46,920 --> 00:01:49,890
go również w normalnym przypadku check.

23
00:01:49,970 --> 00:01:56,300
Więc teraz możemy wrócić tutaj i widzimy, że kiedy zaczynamy grę, nie mamy tak ogromnej luki tutaj

24
00:01:56,300 --> 00:02:01,580
na mniejszym ekranie, na iPhonie, który jest większym ekranem, jednak zdecydowanie mamy większy odstęp

25
00:02:01,670 --> 00:02:05,960
i aby to wyraźniej zobaczyć, możesz oczywiście się z tym pobawić

26
00:02:06,050 --> 00:02:12,690
i na przykład użyć 30 dla mniejszych ekranów i 30 dla większych ekranów i 5 dla mniejszych ekranów,

27
00:02:12,800 --> 00:02:15,170
a teraz zdecydowanie powinieneś to zobaczyć.

28
00:02:15,350 --> 00:02:17,680
Tutaj mamy małą lukę,

29
00:02:17,840 --> 00:02:20,450
a tutaj mamy większą lukę.

30
00:02:20,750 --> 00:02:23,540
Możemy więc użyć tego również w warunkach.

31
00:02:23,540 --> 00:02:29,060
Teraz ustawię z powrotem na 20 i 5, ale mam nadzieję, że teraz pokazuje jeszcze inny sposób

32
00:02:29,060 --> 00:02:30,110
korzystania z tego.

33
00:02:30,110 --> 00:02:34,700
Możesz użyć tego w warunkach, które oczywiście dają dużą elastyczność w przypadkach, gdy

34
00:02:34,700 --> 00:02:40,670
nie chcesz używać szerokości w obliczeniach dynamicznych, ale masz różne zakodowane wartości, których chcesz użyć w oparciu

35
00:02:40,670 --> 00:02:46,730
o różne punkty przerwania, które chcesz zestaw, trochę tak, jak znasz to z CSS, gdzie masz również zapytania

36
00:02:46,730 --> 00:02:51,080
o media, a następnie możesz renderować różne rzeczy na podstawie różnych zapytań

37
00:02:51,080 --> 00:02:51,830
o media.

38
00:02:52,070 --> 00:02:57,740
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

39
00:02:57,740 --> 00:03:04,100
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

40
00:03:04,130 --> 00:03:10,070
zależności od dostępnej szerokości lub wysokości. Możemy również użyć okna Pobierz

41
00:03:10,100 --> 00:03:18,050
wymiary tutaj, w którym przypisuję mój styl, i na przykład sprawdź tutaj moją wysokość, sprawdź, czy jest

42
00:03:18,050 --> 00:03:25,400
ona większa niż 600, a jeśli tak jest, użyj kontenera przycisku stylów, a jeśli nie,

43
00:03:25,520 --> 00:03:31,520
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

44
00:03:31,670 --> 00:03:37,280
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

45
00:03:37,280 --> 00:03:45,690
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

46
00:03:45,690 --> 00:03:49,830
tak, powiedzmy, zwracasz zupełnie inny kod jsx, a zatem ten kod

47
00:03:49,830 --> 00:03:55,910
nie będzie nigdy uruchamiany, jeśli wrócisz tutaj i tylko jeśli nie zrobisz tego, jeśli to sprawdzisz,

48
00:03:55,910 --> 00:03:57,230
więc jeśli

49
00:03:57,230 --> 00:04:02,560
masz urządzenie, które nie jest tak wysokie jak to, to zrobisz to tam.

50
00:04:02,600 --> 00:04:09,260
Jesteś więc naprawdę elastyczny i wykorzystujesz tę elastyczność do tworzenia pożądanych układów, ponieważ właśnie o to

51
00:04:09,410 --> 00:04:14,020
w tym wszystkim chodzi i daje dużo elastyczności twoim aplikacjom.

52
00:04:14,120 --> 00:04:15,440
To jest odstęp

53
00:04:15,440 --> 00:04:19,210
między nimi, teraz chciałem również zmienić moje elementy dziennika na dole,

54
00:04:19,340 --> 00:04:21,560
to też oczywiście możemy łatwo zrobić.

55
00:04:21,740 --> 00:04:28,400
Mamy tam nasze elementy listy i na elementach listy ustawiamy szerokość na 100%, ponieważ ustawiamy tutaj naszą szerokość

56
00:04:28,400 --> 00:04:32,330
listy z kontenerem listy, a to jest ustawione na 60%.

57
00:04:32,600 --> 00:04:36,750
Teraz 60% wygląda całkiem dobrze na większych urządzeniach, ale myślę,

58
00:04:36,910 --> 00:04:40,280
że na mniejszych urządzeniach moglibyśmy pójść dalej.

59
00:04:40,280 --> 00:04:48,050
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ą

60
00:04:48,050 --> 00:04:55,370
szerokość, a może też używamy API wymiarów do obliczenia tego dynamicznie lub ponownie używamy sprawdzania if.

61
00:04:55,910 --> 00:05:03,500
Tutaj znów możemy powiedzieć, że wymiary mają okno, w tym przypadku uzyskają dostępną szerokość, a jeśli to

62
00:05:03,500 --> 00:05:07,340
powiedzmy, że jest większe niż 500, to

63
00:05:07,340 --> 00:05:15,220
chcę użyć 60%, w przeciwnym razie chcę użyć 80%. Teraz po prostu renderujemy szerszy, szerszy kontener listy w

64
00:05:15,220 --> 00:05:18,070
oparciu o dostępną szerokość na urządzeniu,

65
00:05:18,250 --> 00:05:19,340
na którym

66
00:05:19,420 --> 00:05:24,490
pracujemy i używamy tutaj 350, może zamiast 500, ponieważ mówimy o szerokości,

67
00:05:24,490 --> 00:05:26,350
a nie o wysokości.

68
00:05:26,380 --> 00:05:31,630
Więc teraz, jeśli uruchomimy to na iPhonie, będziemy mieli taką samą szerokość jak poprzednio, ale na

69
00:05:32,080 --> 00:05:33,820
mniejszym ekranie mamy większe przedmioty.

70
00:05:33,820 --> 00:05:37,650
Tak też możemy zrobić i oczywiście możesz pobawić się punktem przerwania,

71
00:05:37,690 --> 00:05:39,140
który skutecznie ustawiasz tutaj.

72
00:05:39,160 --> 00:05:41,290
możesz wypróbować tutaj różne rozmiary punktów przerwania.

73
00:05:41,320 --> 00:05:43,420
Oczywiście możesz również mieć wiele punktów

74
00:05:43,420 --> 00:05:48,940
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

75
00:05:48,940 --> 00:05:56,500
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ć

76
00:05:56,500 --> 00:06:03,820
duży pojemnik z listą tu i tam, ustawiamy flex jeden i ustawiamy

77
00:06:03,820 --> 00:06:09,320
naszą szerokość, powiedzmy 80%, ponieważ jest to duży i

78
00:06:09,450 --> 00:06:13,380
tutaj mamy normalny z 60% .

79
00:06:13,380 --> 00:06:18,400
Teraz nie mam warunku if, ale mam dwa różne obiekty stylu

80
00:06:18,400 --> 00:06:22,320
i teraz musimy tylko dołączyć różne obiekty

81
00:06:22,680 --> 00:06:31,780
stylu tam, nie tutaj, ale tutaj, oczywiście, w tym widoku. Cóż, aby to zrobić, możemy po prostu ustawić tutaj zmienną stylu

82
00:06:31,780 --> 00:06:38,740
kontenera listy i wskazać kontener listy stylów, który jest naszym domyślnym, ale następnie dodać tutaj sprawdzenie, czy sprawdzamy,

83
00:06:38,830 --> 00:06:46,750
czy wymiary mają szerokość okna, a teraz, czy szerokość tutaj jest powiedzmy mniejszy niż 350, więc jeśli mamy małe urządzenie,

84
00:06:46,750 --> 00:06:51,910
to chcemy mieć duży kontener listy, abyśmy mogli ustawić styl kontenera listy, ta

85
00:06:51,910 --> 00:06:53,470
zmienna równa kontenerowi

86
00:06:53,470 --> 00:06:55,960
stylów listy duży, aby wskazywał na

87
00:06:55,960 --> 00:07:01,960
ten obiekt stylu, a teraz możemy użyć tego obiektu stylu tutaj w widoku, w którym

88
00:07:01,960 --> 00:07:07,180
potrzebujemy stylu kontenera listy, używamy teraz zmiennej, która przechowuje inny obiekt stylu kontenera

89
00:07:07,330 --> 00:07:13,060
listy w zależności od szerokości naszego urządzenia. A jeśli teraz to zapiszemy i uruchomimy

90
00:07:13,060 --> 00:07:19,270
to ponownie, zobaczysz, że na iPhonie z większym urządzeniem, na którym mamy większą szerokość, mamy mniejszy pojemnik, a

91
00:07:19,270 --> 00:07:24,200
tutaj na telefonie z Androidem z mniejszym urządzeniem, o mniejszej szerokości, otrzymujemy większy pojemnik.

92
00:07:24,280 --> 00:07:26,980
Jest to taki sam wynik jak

93
00:07:27,070 --> 00:07:32,080
poprzednio, ale nieco bardziej czytelny, a teraz moglibyśmy mieć wiele takich, jeśli sprawdzimy

94
00:07:32,080 --> 00:07:34,900
tutaj, gdzie przechowujemy tutaj różne style w stylu

95
00:07:34,900 --> 00:07:42,070
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.

96
00:07:42,070 --> 00:07:47,650
W ten sposób możesz się z tym pogodzić i mieć świadomość, że API wymiarów

97
00:07:47,770 --> 00:07:48,970
jest bardzo ważne.