React Native: StyledComponents

0.62.2+

0:00Na poprzedniej lekcji pokazali zrobiliśmy ostylowaliśmy

0:04nasz profil wyeksportowaliśmy nasze style do

0:08StyleSheetu i to generalnie można by na tym jeśli chodzi o kwestie stylowania zakończyć

0:12spokojnie można tego używać w aplikacjach produkcyjnych natomiast

0:17jest pewne rozwiązanie o którym być może słyszeliście to sie nazywa

0:21Styled Components który ja zdecydowanie preferuję i żeby wam pokazać

0:25to po prostu sobie zainstalujmy to to jest npm install save save styled components

0:39okej zainstalowała się nasza paczka jak widzieliście w międzyczasie tutaj nam się porobiły jakieś błędy jeśli

0:44swoją drogą mielibyście tak że coś by wam

0:48się nie chciało załadować wyskakiwały wam błędy to możecie zamknijmy sobie może tutaj

0:52androida na tę chwilę to możecie sobie czasem

0:56zreloadować naszą aplikację kilkukrotnie

1:01tutaj coś się nam schrzaniło więc sobie to wyłączymy i zrobimy jeszcze raz

1:05yarn ios czasem

1:10bundler się gubi zwłaszcza właśnie jak używamy fast refresha to różne

1:14rzeczy się dzieją więc zbudujmy sobie to na spokojnie jeszcze raz okej

1:22nasz iOS stoi i też odpalmy sobie naszą aplikację androidową żebyśmy

1:28widzieli że nie kłamię że to działa na obu platformach tutaj

1:33nam się coś też bo chcemy logi stąd świetnie

1:38mamy naszego bundlera mamy nasze aplikacje i tak skończyliśmy

1:42na tym że mamy te style natomiast jest pewne rozwiazanie o którym właśnie wspominałem

1:46Styled Components które według mnie ale osobiście to jest moja subiektywna opinia

1:50bo znam ludzi którzy tego nie robią uważam że to jest lepsze czyli jak

1:55to wygląda w praktyce robimy sobie import styled from styled components

2:00zobaczmy czy nic się nam nie wykrzaczyło jest

2:04chyba okej tu się refreshuje świetnie

2:09i to co mi się nie podoba w tym ja bardzo lubię jak

2:13nasz nasza struktura dokumentu czyli

2:17powiedzmy nasz widok struktura widoku właściwie jest odseparowana

2:22maksymalnie od styli i od logiki ale o tym trochę później dlaczego

2:27dlatego że jakby struktura

2:31powinna pokazywać tak jak nazwa wskazuje strukturę tego wszystkiego a nie skupiać się na tym

2:35jak co się prezentuje czyli jeśli byśmy wywalili wszystkie

2:39style to to dalej powinno struktura powinna oddawać mniej wiecej charakter tego co wyświetlamy

2:43i tutaj tak jest oczywiście tak wyeksportowaliśmy sobie style i faktycznie tu żadnych styli nie mamy

2:47ale popatrzmy na jedną rzecz to jest nasz obiekt który możemy powiedzmy

2:51nazwać kontener i tak nazwaliśmy jego styl i co się dzieje w jednej linijce

2:56w której opisujemy ten kontener mamy tak słowo View słowo style słowo

3:00styles i dopiero słowo container tak naprawdę patrząc na to mamy na myśli

3:04tylko i wyłącznie container że to jest nas kontener którego

3:09używać w zwiazku z tym możemy

3:13właśnie użyć naszego Styled Components jak to wygląda tworzymy

3:17sobie komponent dlatego nazywam zaczynam nazwę tego dokumentu

3:22z wielkiej litery bo Styled Components tworzy nam komponenty które są po prostu ostylowane

3:26stwórzmy sobie nasz Styled Components View tak

3:30wygląda struktura tego i przepiszmy sobie nasze style do tego

3:35tylko są tutaj dwa ale jeśli ja to spróbuję odpalić to

3:39nic jeszcze takiego strasznego nie stało ale jeśli

3:45będę chciał tego użyć w ten sposób co jest uważam dużo bardziej

3:49czytelne zauważcie że w tej chwili patrzymy na to od góry widzimy że całą

3:53aplikację cała aplikacja zapakowania w nasze SafeArea po to żebyśmy nie wychodzili poza te

3:58miejsca do których nie powinniśmy wychodzić a całość jest całość

4:02naszego tu kontynentu jest właśnie opokowana przez kontener i tyle nas interesuje nas interesuje

4:06że to jest kontener a jakie on ma style co się dzieje to już tak naprawdę jest trochę inna kwestia natomiast

4:10jak widzicie nasz bundler wywalił parę błędów z czego to wynika z

4:14tego że drugą którą uważam fajną swoją drogą fajną rzeczą jest to że tak

4:19jak w przypadku StyleSheetu czy inline stylowania konwencja pisania styli

4:23była camelcasem tak tutaj mamy

4:27klasyczne style css-owe znaczy nie wszystkie są dostępne z poziomu React Native'a

4:31ale te które są piszemy w stylu kasycznym czyli musimy

4:35napisać je w ten sposób tak i poprawimy sobie tutaj te style nie

4:40musimy pisać tego już jako tekst tu

4:45też sobie to usuniemy tu też średnik i

4:49oczywiście align content align items zobaczmy

4:53jak to się prezentuje w tej chwili nic się nie stało kolor

4:58się nie zgadza a bo tutaj już nie musimy podawać tego jako tekst i

5:03świetnie mamy nasz kontener jest to dokładnie tak samo stylowane a zauważcie

5:07co się dzieje po pierwsze że mamy tak jak już wspominałem jasną informację

5:11o tym co robi dany dany znacznik czyli on jest naszym kontenerem

5:15a po drugie używamy sobie styli które są gdzieś tam bliższe chyba

5:20nam wszystkim czyli w takiej konwencji css-owej i

5:24uważam że ale to jest moja subiektywna ocena że to jest po prostu fajniejsze przepiszmy

5:28sobie wszystkie style pozostałe czyli mamy jeszcze nasz ProfileImage

5:32to się równa styled Image i co my

5:38tutaj mamy mamy width 100 mamy

5:44height 100 i mamy border radius

5:5050 i użyjemy sobie

5:54tego ProfileImage tutaj no i od razu możemy sobie to

5:58wywalić super i

6:02jeszcze zostały nam dwa style to jest nasz

6:07ProfileNameText w którym mamy

6:16chyba tylko font size tak font size 20

6:21i mamy analogiczny co tam było

6:25DescriptionText który

6:29miał font size 16 i kolor oj przepraszam to jest średnik

6:34i kolor grey

6:38i 4 style mamy 4 style mamy zgadza się użyjmy sobie tego tutaj i

6:44patrzcie co się stało DescriptionText osobiście

6:50moim zdaniem to jest dużo bardziej czytelne od tego co było poprzednio każdy

6:55komponent faktycznie widzimy jaką ma rolę co więcej my się nie musimy zastanawiać

6:59nad tym czy to jest komponent podstawowy czyli typu tekst który ma jakieś style

7:03czy to jest komponent taki złożony który po prostu tutaj zagnieżdżamy

7:07tak czyli moglibyśmy sobie zrobić po prostu tak jak nasz App też jest komponentem moglibyśmy gdzieś zagnieździć jakiś

7:11inny nas to nie interesuje nas interesuje to co ten komponent w danym kontekście robi i

7:16tutaj wszystko jest dla mnie dużo bardziej czytelne moglibyśmy wprawdzie usunąć tutaj słowo kluczowe

7:20Profile bo najprawdopodobniej znajdujemy się w widoku profile aczkolwiek

7:24nie jest to jakieś nie jest to w tej chwili jakimś wielkim problemem czyli wywalmy

7:29sobie ten nasz cały StyleSheet świetnie

7:35i zobaczmy jak to wygląda no jak widać jest coś

7:40żeśmy schrzanili font size milimetry

7:47nie nie mam milimetrów okej czyli

7:51jest okej wszystko działa dokładnie wygląda tak samo jak poprzednio natomiast zauważcie że mamy parę warningów

7:55warning brzmi następująco expacted style font size to contain units

8:01i tak samo mamy w każdych przypadkach i to trochę wynika z

8:05tego w jaki sposób Styled Components radzi

8:09sobie ze stylami natomiast najprostszym rozwiazaniem tego jest po prostu dodanie jednostek

8:13to pixel ale przy czym one niczego nie zmieniają to znaczy

8:17jakby to nie są faktyczne pixele to dalej są nasze density independent pixele ale

8:21jeśli chsemy pozbyć się tego warningu to po prostu możemy zrobić to w ten sposób

8:25natomiast mówię to nie będą takie stricte pixele bo my nie mamy do tutaj z poziomu React Native'u do

8:30nich dostępu okej

8:35myślę że to wygląda całkiem fajnie to co moglibyśmy jeszcze

8:39dodać to myślę że moglibyśmy sobie wyeksportować cały ten nasz

8:43moduł do osobnego pliku zrobimy sobie ProfileScreen

8:47i tak naprawdę w sumie to wszystko moglibyśmy

8:52tam wrzucić w tą różnicą że App zamienimy

8:56na ProfileScreen okej i w tym miejscu

9:02poza może właśnie samym SafeAreaView

9:06użyjemy sobie ProfileScreen okej

9:10usuńmy to stąd

9:15usuńmy AreaView no

9:22i zobaczmy czy nam się udało jest super tak czyli mamy nasz profil który jest jakby osobnym komponentem

9:26i w którym korzystamy z Styled Components ja

9:30osobiście zachęcam was do korzystania ze Styled Components bo po prostu uważam

9:34że to jest czytelniejsze wygodniejsze a przy okazji to że mamy ten tą

9:40konwencję taką typowo css-ową gdzieś tam jest po prostu fajniejsze natomiast jeszcze jedna

9:44rzecz o której chciałem wspomnieć zauważcie że mamy tych styli on nam podpowiada style wszystkie bo po prostu

9:48to jest wtyczka która podpowiada nam style do Reacta do programowania

9:52webowego jako takiego załużmy że chciałem zrobię sobie align

9:56content center co się stanie w tej chwili okej

10:02nic się nie stało w tej chwili nawet nie wyskoczył nam warning natomiast to po prostu nie ma żadnego wpływu znaczy

10:06jeśli użyjemy styli akurat ten styl align content nie jest wspierany przez React Native

10:10się nie stanie w pewnych przypadkach może po prostu bundler

10:14wyłożyć nam jakiś error albo warning to zależy trochę od tego z czego

10:18skorzystamy natomiast nie musimy się tutaj w tej

10:22chwili przejmować no i to myślę że to tyle jeśli chodzi o tą lekcję takiego

10:27już stylowania może nie zamocowanego aczkolwiek takiego docelowego

10:31z którego będziemy korzystać w dalszej części kursu