Zaczęliśmy więc od wprowadzania tekstu, teraz nie robimy nic z wartościami wprowadzanymi przez użytkownika, ale zanim to zrobimy,
upewnijmy się, że tak naprawdę przycisk nie znajduje się poniżej tego wpisu, ale obok niego po
prawej stronie i dla
że znowu musimy popracować nad układem.
Właśnie dlatego mam ten dodatkowy widok wokół tekstu wprowadzanego do przycisku.
Nie potrzebowalibyśmy tego, ale teraz dzięki temu zagnieżdżonemu widokowi możemy kontrolować, w jaki
sposób te dwa elementy są do siebie wyrównane,
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ć
z sieci, jeśli nie, w załączniku znajdziesz zasoby, które pomogą Ci zacząć z CSS Flexbox.
Nie musisz znać wejścia i wyjścia Flexboksa, ale pomaga ci to trochę
wiedzieć, Flexbox działa tak, że ustawia elementy wewnątrz widoku obok siebie lub nad sobą, domyślnie nad sobą
w React Native i możesz to zmienić, ustawiając
kierunek wygięcia z kolumny, która jest domyślna dla wiersza, i po prostu dodając to, w
tym widoku zastępujemy wartość domyślną, która jest domyślna, dlatego nie musimy ustawiać jej z
kolumny, a teraz już , zobaczymy, że przycisk w tekście wpisuje się obok siebie,
nie
wygląda jeszcze tak świetnie, ale siedzą obok siebie. Teraz, aby wyglądało to lepiej, możemy również
dodać więcej, na
przykład możesz zdefiniować sposób wyrównywania i rozmieszczania elementów w wierszu lub kolumnie.
Na przykład w przypadku uzasadnienia treści można kontrolować, w jaki sposób elementy są rozmieszczane wzdłuż ich głównej osi,
a w wierszu główna oś jest od lewej
do prawej, jeśli byłaby to kolumna, główna oś byłaby od góry do dołu.
Więc teraz możemy podać wartość, a tutaj moje IDE daje mi nawet autouzupełnianie, co jest bardzo wygodne,
możemy na przykład podać wartość spacji między. Oznacza to, że cała pozostała wolna przestrzeń znajduje się
między dwoma elementami, więc nie
siedzą teraz bezpośrednio obok siebie, ale zamiast tego jest między nimi jakaś
wolna przestrzeń.
Teraz możemy również wyrównać je na ich
osi poprzecznej, więc główna oś dla rzędu kierunku wygięcia była od lewej do prawej,
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
byłaby od lewej do
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,
za pomocą elementów wyrównywania możesz kontrolować, w jaki sposób elementy potomne tego widoku są wyrównane wzdłuż osi poprzecznej,
i tam masz różne wartości, takie jak na przykład środek.
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
teraz ładniej i jest po prostu wyśrodkowany w środku tego wejścia. Cóż, a teraz możemy również nieco
zwiększyć szerokość tego wejścia, przechodząc do wprowadzania tekstu i tam
w stylu, możemy również dodać szerokość, powiedzmy 200, aby nadać temu szerokość 200 pikseli,
co oznacza, że to jest teraz trochę większe. Nawiasem mówiąc, możesz również wybrać wartość
procentową, np. 80%, co oznacza, że zajmuje to 80% dostępnej szerokości udostępnionej przez jej
komponent macierzysty, a więc przez otaczający go widok. A teraz spojrzeliśmy na pierwsze ważne podstawy, dotyczące
układania rzeczy w React Native i stylizacji, ale teraz robimy to wszystko z tą
koncepcją zwaną stylami wbudowanymi, co oznacza, że konfigurujemy style bezpośrednio na elementach, co nie
jest idealne.