React Native: Stylowanie (StyleSheet)

0.62.2+

0:00W poprzedniej lekcji stworzyliśmy nasz bardzo podstawowy profil wykorzystując

0:04takie podstawowe komponenty jak View Image i Text no i teraz chcielibyśmy

0:09troszeczkę to ostylować i oczywiście moglibyśmy iść dalej tą drogą stylowania

0:14w ten sposób natomiast są z tym związane dwa problemy pierwszy problem który się na pewno już wam

0:18rzucił w oczy jest taki że tutaj ESLint taka

0:25takim jakby defaultowa wtyczka do React Native'a przedstawia nam tutaj

0:30warning że tak się nie powinno robić że czemu stylujemy to inline jakby

0:34powody są problemy sa dwa po pierwsze to kiepsko wygląda to znaczy w

0:38momencie kiedy w którym tworzymy sobie naszą strukturę dokumentu bo tak trzeba podchodzić do

0:43naszego JSX-a czy html-a to stylowanie inline trochę go zaciemnia

0:47bo nagle nie widzimy do końca gdzie jest ten View gdzie jest nasz Image gdzie jest

0:51tekst i tak naprawdę takie stylowanie burzy nam trochę tą

0:55hierarchię i zaczyna powodować że gdzieś tam się w tym

0:59wszystkim pogubimy akurat w takim prostym przypadku może tego nie widać ale w

1:03przypadku bardziej złożonych komponentów no to już mocno kłuje w

1:07oczy druga sprawa jest taka o jakiej mówiłem w rozdziale o tym jak działa

1:11React Native otóż przy każdym renderowaniu przy każdej zmianie nasz

1:16nasz wątek JS-owy komunikuje się z wątkiem natywnym

1:21z UI menadżerem i mówi mu o tym jak mają być wyrenderowane widoki co się zmienia i tak dalej

1:25jeśli stylowanie robimy inline'owo to za każdym razem te

1:29style będą muszą być przekazane bo jakby skąd ma wiedzieć nasz

1:33nasz silnik że te style są zmienione albo są takie same więc

1:38mocno wpływa to na efektywność oczywiście znowu w takim

1:42prostym przypadku tego nie zauważymy ale jeśli będziemy mieli jakąś listę skomplikowany widok odpalimy

1:46to na słabszym telefonie to możemy zaczynać zauważać problemy jakieś białe ekrany

1:51migotanie i tak dalej więc z tych

1:55dwóch powodów plus z mojego osobistego zalecenia nigdy nie stylujmy

1:59inline'owo i fajnie że w tym ESLint'cie który jest wrzucony tutaj

2:03do taki paczki React Native'owej to już nas ostrzega o tym

2:07i nawet jeśli byście tego nie mieli to błagam nie róbcie

2:11tego nigdy jak to się powinno robić w React Native

2:15mam coś takiego jak StyleSheet jest trochę podobny do takich zwykłych styli css-owych

2:20z tą różnicą że nie

2:25mamy dostępu do wszystkich styli jakie mamy

2:30w środku przeglądarki tak znaczy tutaj co przedstawiliśmy backgroundColor width height to wszystko jest

2:34natomiast nie możemy oczywiście stylować tworzyć animacji css-owych i

2:38paru innych rzeczy natomiast jeśli byśmy użyli jakiegoś stylu który nie jest

2:42dostępny to oczywiście od razu nam się tutaj bundler zakomunikuje

2:46że coś jest nie tak ale o tym za chwilę na razie pokażmy jak przenieść te style

2:50które są tutaj tak brzydko inline'owo w odseparowane miejsce

2:54stwórzmy sobie zatem nasz

2:58styl zdefiniowany i nazwijmy go container i

3:03przenieśmy sobie nasze wszystkie te style do tego kontenera tutaj

3:08zrobimy sobie styles.container zapiszmy to

3:12super czyli jak widać możemy w taki sposób dokładnie

3:16te style również z camelcasem przenieść sobie do osobnego bytu

3:21i dzięki temu mamy to rozbite i tak samo musimy zrobić sobie tutaj z

3:25naszym profileImage przenosimy

3:29sobie nasze style tutaj wypiszmy

3:33tutaj robimy sobie styles.profileImage

3:37i jeszcze nam został

3:41profileNameText

3:45który ma fontSize

3:52zmieniamy to na styles.profileNameText Jan Nowak

3:57no świetnie i nasze style juz są jakby eksportowane

4:01z tego StyleSheetu i to już jest lepsze ładniejsze zauważcie że teraz widzimy dużo lepiej naszą strukturę

4:05naszego dokumentu naszego widoku widać

4:10że jeszcze przydałoby się pewnie jakieś stylowanie tutaj tego opisu a więc możemy sobie go dopisać na

4:14razie to będzie puste na przykład profile czy właściwie nie musimy pisać profile bo wiem że

4:18jesteśmy profile'u descriptionText

4:23a żeby coś tam w nim było to ustawmy sobie fontSize na przykład 16

4:28i dodajmy color

4:33grey i

4:38ustawmy mu styl style to się równa

4:42styles.descriptionText udało się udało się

4:46może to nie jest najładniejsze ale jest zmieńmy sobie ten kolor może

4:50troszeczkę na jakiś taki subtelniejszy na przykład #eeeeee

4:57okej no i coś tam jest jakoś to widać fajnie

5:01byłoby to jakoś wyśrodkować bo gdzieś tam to się tam wyszystko plącze w rogu więc sobie możemy

5:06tutaj ustawić nasz justifyContent center i

5:10align no właśnie ustawmy sobie alignContent center

5:14i zobaczcie co się dzieje no niestety się nam to nie

5:18wycentrowało żeby to zrobić musimy

5:22ustawić alignItems center okej

5:26i jest super i tak naprawdę

5:30a jeszcze jedną rzecz byśmy tutaj mogli poprawić na przykład dodać sobie borderRadius żeby

5:35nasze nasza grafika profilowa borderRadius

5:39była okrągła super

5:44i generalnie to jest jakby podsumowując tą lekcje pamiętajcie nigdy

5:48nie róbcie styli inline'owych bo to po prostu się

5:53nie sprawdza to jest kiepskie prędzej czy później będziecie mieli z tym problemy więc warto

5:57od początku już te style robić ten sposób docelowo

6:02no i to tyle jeśli chodzi o takie podstawowe stylowanie