1
00:00:02,230 --> 00:00:08,300
Zaczęliśmy więc od wprowadzania tekstu, teraz nie robimy nic z wartościami wprowadzanymi przez użytkownika, ale zanim to zrobimy,

2
00:00:08,350 --> 00:00:14,020
upewnijmy się, że tak naprawdę przycisk nie znajduje się poniżej tego wpisu, ale obok niego po

3
00:00:14,020 --> 00:00:15,520
prawej stronie i dla

4
00:00:15,520 --> 00:00:17,700
że znowu musimy popracować nad układem.

5
00:00:17,710 --> 00:00:21,970
Właśnie dlatego mam ten dodatkowy widok wokół tekstu wprowadzanego do przycisku.

6
00:00:21,970 --> 00:00:27,490
Nie potrzebowalibyśmy tego, ale teraz dzięki temu zagnieżdżonemu widokowi możemy kontrolować, w jaki

7
00:00:27,490 --> 00:00:31,440
sposób te dwa elementy są do siebie wyrównane,

8
00:00:31,660 --> 00:00:38,980
ponownie dodając tu i teraz właściwość stylu do układania, pozycjonowania, React Native używa Flexboksa, który również możesz wiedzieć

9
00:00:38,980 --> 00:00:45,050
z sieci, jeśli nie, w załączniku znajdziesz zasoby, które pomogą Ci zacząć z CSS Flexbox.

10
00:00:45,220 --> 00:00:49,840
Nie musisz znać wejścia i wyjścia Flexboksa, ale pomaga ci to trochę

11
00:00:49,840 --> 00:00:56,590
wiedzieć, Flexbox działa tak, że ustawia elementy wewnątrz widoku obok siebie lub nad sobą, domyślnie nad sobą

12
00:00:56,800 --> 00:01:00,200
w React Native i możesz to zmienić, ustawiając

13
00:01:00,230 --> 00:01:06,460
kierunek wygięcia z kolumny, która jest domyślna dla wiersza, i po prostu dodając to, w

14
00:01:06,880 --> 00:01:12,610
tym widoku zastępujemy wartość domyślną, która jest domyślna, dlatego nie musimy ustawiać jej z

15
00:01:12,610 --> 00:01:18,430
kolumny, a teraz już , zobaczymy, że przycisk w tekście wpisuje się obok siebie,

16
00:01:18,430 --> 00:01:19,180
nie

17
00:01:19,330 --> 00:01:26,100
wygląda jeszcze tak świetnie, ale siedzą obok siebie. Teraz, aby wyglądało to lepiej, możemy również

18
00:01:26,130 --> 00:01:27,960
dodać więcej, na

19
00:01:28,140 --> 00:01:34,300
przykład możesz zdefiniować sposób wyrównywania i rozmieszczania elementów w wierszu lub kolumnie.

20
00:01:34,650 --> 00:01:41,700
Na przykład w przypadku uzasadnienia treści można kontrolować, w jaki sposób elementy są rozmieszczane wzdłuż ich głównej osi,

21
00:01:41,700 --> 00:01:45,410
a w wierszu główna oś jest od lewej

22
00:01:45,480 --> 00:01:50,570
do prawej, jeśli byłaby to kolumna, główna oś byłaby od góry do dołu.

23
00:01:50,630 --> 00:01:57,980
Więc teraz możemy podać wartość, a tutaj moje IDE daje mi nawet autouzupełnianie, co jest bardzo wygodne,

24
00:01:58,130 --> 00:02:05,210
możemy na przykład podać wartość spacji między. Oznacza to, że cała pozostała wolna przestrzeń znajduje się

25
00:02:05,210 --> 00:02:07,690
między dwoma elementami, więc nie

26
00:02:07,760 --> 00:02:12,560
siedzą teraz bezpośrednio obok siebie, ale zamiast tego jest między nimi jakaś

27
00:02:12,560 --> 00:02:13,590
wolna przestrzeń.

28
00:02:14,590 --> 00:02:18,010
Teraz możemy również wyrównać je na ich

29
00:02:18,060 --> 00:02:23,950
osi poprzecznej, więc główna oś dla rzędu kierunku wygięcia była od lewej do prawej,

30
00:02:23,950 --> 00:02:31,130
a oś poprzeczna była od góry do dołu. W przypadku kolumny z kierunkiem gięcia główna oś byłaby od góry do dołu, a oś poprzeczna

31
00:02:31,130 --> 00:02:32,220
byłaby od lewej do

32
00:02:32,270 --> 00:02:38,750
prawej, więc oś poprzeczna jest po prostu przeciwna do głównej osi, że tak powiem. Wyjustuj pozycje zawartości wzdłuż głównej osi,

33
00:02:38,750 --> 00:02:46,910
za pomocą elementów wyrównywania możesz kontrolować, w jaki sposób elementy potomne tego widoku są wyrównane wzdłuż osi poprzecznej,

34
00:02:46,910 --> 00:02:51,670
i tam masz różne wartości, takie jak na przykład środek.

35
00:02:51,980 --> 00:02:58,250
Tak więc w tym przypadku, ponieważ mamy rząd kierunku wygięcia, powinien on wyśrodkować pionowo wszystkie elementy, co oznacza, że przycisk wygląda

36
00:02:58,250 --> 00:03:05,230
teraz ładniej i jest po prostu wyśrodkowany w środku tego wejścia. Cóż, a teraz możemy również nieco

37
00:03:05,230 --> 00:03:10,150
zwiększyć szerokość tego wejścia, przechodząc do wprowadzania tekstu i tam

38
00:03:10,150 --> 00:03:17,050
w stylu, możemy również dodać szerokość, powiedzmy 200, aby nadać temu szerokość 200 pikseli,

39
00:03:17,050 --> 00:03:24,170
co oznacza, że to jest teraz trochę większe. Nawiasem mówiąc, możesz również wybrać wartość

40
00:03:24,560 --> 00:03:30,830
procentową, np. 80%, co oznacza, że zajmuje to 80% dostępnej szerokości udostępnionej przez jej

41
00:03:30,890 --> 00:03:38,180
komponent macierzysty, a więc przez otaczający go widok. A teraz spojrzeliśmy na pierwsze ważne podstawy, dotyczące

42
00:03:38,450 --> 00:03:44,720
układania rzeczy w React Native i stylizacji, ale teraz robimy to wszystko z tą

43
00:03:44,720 --> 00:03:51,040
koncepcją zwaną stylami wbudowanymi, co oznacza, że konfigurujemy style bezpośrednio na elementach, co nie

44
00:03:51,050 --> 00:03:52,250
jest idealne.