Teraz jest to również dla ciebie
dobra praktyka, możesz zatrzymać tutaj wideo i spróbować ustawić te dwa przyciski obok siebie, tylko
dwa przyciski, nie wejście i dwa przyciski, ale te dwa przyciski powinny znajdować się w jednym nowy wiersz
poniżej wejścia, ale następnie usiądź obok siebie.
Po krótkiej pauzie, której możesz użyć do wstrzymania filmu, oczywiście zrobimy to razem.
Więc odniosłeś sukces?
Spróbujmy razem.
Kluczem tutaj jest użycie Flexboksa i innego widoku, ponieważ ponownie, jak już wspomniałem i co jest naprawdę ważne, aby
zrozumieć, komponenty widoku są twoim podstawowym komponentem do organizowania innych komponentów lub do wykorzystania jako kontener,
który możesz również stylizować,
ale tutaj skrzynka, aby uporządkować inne komponenty. Więc przesunę dwa przyciski wewnątrz tego widoku
i teraz możemy przypisać styl do tego widoku, a ten styl oczywiście zostanie
zdefiniowany tutaj w naszym obiekcie stylu i nadam
nazwę kontenerowi przycisków, to zależy od ciebie, tę nazwę i tam chcę ustawić kierunek
wygięcia wiersza, aby usiadły obok siebie, a następnie ustawię uzasadnienie zawartości przestrzeni między, aby mieć
wolne miejsce między dwoma przyciskami.
Dodajmy teraz styl do tego widoku, zapisz pojemnik z przyciskami i zapisz to, a teraz są przyciski, ale
aby mieć wolne miejsce, ma tutaj wpływ, który będzie jeszcze wyraźniejszy na Androidzie, że obecnie
nie ma żadnego efekt,
aby przestrzeń między nie miała żadnego
efektu, pozwól mi szybko pokazać to na Androidzie.
Widzisz,
nie ma wolnego miejsca.
Powodem tego jest po prostu to, że nie mamy przypisanej szerokości do naszego pojemnika
na
przyciski, a zatem, jak się dowiedziałeś, zajmuje
tylko szerokość dzieci i jest to po prostu
szerokość dwóch przycisków
dodanych razem, dlatego nie ma wolnego miejsca na dodaj pomiędzy.
Mamy więc między sobą trochę wolnego miejsca, po prostu musimy przypisać znak „do” do przycisku i
teraz ta szerokość zależy oczywiście od Ciebie. Ponieważ wejście ma 80%, moglibyśmy
pójść z 80% tutaj, a może z 60%, aby mieć go nieco bardziej wąskiego niż powyższe wejście, aby przyciski
nie znajdowały się na krawędziach wejścia, ale to oczywiście do ciebie, a zatem
teraz,
jeśli to się ładuje ponownie i przyjrzymy się temu na Androidzie za pomocą
tego wygodnego sposobu zamykania i ponownego uruchamiania, teraz powinniśmy zobaczyć trochę wolnego miejsca między
tymi dwoma przyciskami,
tak, to wygląda dobrze.
Oczywiście możesz się z tym
pobawić, możesz też oczywiście dodać style do przycisków, możesz także
dodać rekwizyty stylów tutaj i dodać margines po lewej i prawej stronie każdego przycisku, który też
by działał.
Możesz także bawić się tutaj innymi wartościami, takimi jak spacja wokół, aby mieć wolne miejsce po lewej i prawej
stronie przycisków, a nie tylko między nimi.
To wszystko, co możesz zrobić. Pójdę tutaj z przestrzenią i przyjrzę się temu,
ale ostatecznie to po prostu coś zależy od ciebie.
Ważne jest oczywiście to, że rozumiesz, jak możesz osiągnąć coś za pomocą widoku,
który owijasz wokół przycisków i Flexboksa, i dzięki temu
powiedziałbym, że mamy tutaj przyzwoity wygląd.
Teraz ostatnią rzeczą, naprawdę ostatnią rzeczą, którą nadal chcę zrobić, jest zmiana rozmiaru tych przycisków, ponieważ nie są one jednakowej wielkości
i myślę, że wyglądałoby to trochę ładniej, gdyby miały ten sam rozmiar.
Teraz na przycisku nie możesz dodać rekwizytu stylu i ustawić szerokość, bez względu na to,
czy używasz stylów wbudowanych, czy
obiektu arkusza stylów, a to jest coś, co
musisz wiedzieć, dlatego tutaj to omawiam, musisz owinąć przycisk w osobny widok, tak jak robię to tutaj, a następnie
nadać temu widokowi przycisk, na przykład tutaj możemy dodać przycisk stylów, odnosząc się do właściwości przycisku na
dole, do każdego widoku i tam na tym właściwość przycisku, którą teraz dodam, możesz dodać szerokość
powiedzmy 40%, a to będzie 40%
elementu nadrzędnego tego widoku, więc 40% tego widoku kontenera przycisku, który sam zajmuje 60% całej dostępnej
szerokości i oczywiście możemy to zrobić również na drugim przycisku.
Więc to tylko coś, co musisz wiedzieć, jeśli dodasz tutaj swoje otaczające widoki wokół przycisków.
Teraz, gdy ponownie uruchomimy Androida, powinniśmy mieć przyciski o równej wielkości, co oczywiście
jest często pożądane.
Oczywiście mogłeś również użyć tutaj wartości pikselowej zamiast wartości procentowych, ale teraz jestem bardzo szczęśliwy, myślę,
że teraz jest
to naprawdę aplikacja, która wygląda dobrze, zachowuje się dobrze i
tak, to dobry początek z React Native.
Oczywiście, jest o wiele więcej, czego możemy się nauczyć i nad czym będziemy się zanurzać, o wiele więcej
możemy zrobić w kwestii stylizacji, ponieważ jak już wspomniano, z pewnością nie jest to najpiękniejsza aplikacja, jaką
kiedykolwiek zbudowałeś, ale omówiliśmy wiele ważnych podstaw tutaj.