React Native: Platform specific code

0.62.2+

0:00W ostatniej lekcji prawie rozwiązaliśmy nasz problem z klawiaturą

0:04i z naszymi inputem to znaczy albo nam to działa na iOS-ie albo nam to działa

0:08na androidzie czyli jeśli ustawimy sobie tutaj padding

0:15to działa nam to fajnie na iOS-ie nie

0:20do końca nam się da nie do końca nam to działa na androidzie natomiast jak ustawimy tu height

0:24to jako

0:28tako nam to działa na androidzie pewnie gdybyliśmy tutaj podziałali marginesem być może to przez ten pasek tutaj

0:33który jest to nam się to nam przysłania ta klawiatura

0:37natomiast no w tym momencie to w ogóle nie działa na iOS-ie jak

0:41to zrobić no najpierw w ogóle dojdźmy do tego żeby to działało jakkolwiek na obu

0:45miejscach a zaraz spróbuje zoptymalizować czyli mamy tutaj sytuację

0:50w której coś ma trochę inaczej działać na iOS-ie na androidzie i troszeczkę inaczej

0:54ma działać iOS-ie i możemy to zrobić na dwa sposoby pierwszy

0:58sposób to jest korzystanie czegoś takiego z moduł jak Platform

1:02taki moduł Platform ma

1:07sobie kilka rzeczy czyli możemy od razu mamy zdefiniowane czy na przykład to jest

1:11ipad czy to jest tv czy to jest tvOS jaka to jest wersja natomiast to co nas interesuje to

1:16jest OS i teraz zróbmy sobie tutaj zróbmy

1:21sobie takie taką taką zmienną którą nazwiemy sobie isAndroid która

1:27będzie zawsze true dla androida okej

1:31i w sytuacji w

1:36której jesteśmy na androidzie zostawmy

1:40to height bo to powiedzmy że w miarę działa a tu ustawmy padding

1:44na wszelki wypadek przebudujmy tutaj

1:48obie apki żeby było jasne zobaczmy super

1:52na iOs-ie no i okej na androidzie w miarę

1:57to działa myślę że moglibyśmy coś z tym podziałać żeby to działało lepiej natomiast

2:01nie będziemy z tym nic robić bo wydaje mi się że lepszym rozwiązaniem

2:05w tym przypadku jest prostu pozbycie się naszego KeyboardAvoidingView

2:10z androida i teraz jak to robimy no

2:14zrobimy to najpierw najprościej to znaczy zrobimy sobie tutaj komponent który nazwiemy

2:18na przyklad ProfileContainer

2:26i teraz jeśli to jest android

2:30to niech nam tu zwróci

2:35tutaj niech ma jakieś propsy to

2:39niech nam tu zwróci fragment to

2:44jest pusty tag czyli używamy tego w sytuacji w której musimy coś opakować ale

2:48ale jakby nie nie view nie dodając

2:52sobie niepotrzebnych zagnieżdzeń i zrobimy tu props.children

2:59okej a w przeciwnym wypadku return

3:04tak chcemy to opakować w

3:08KeyboardAvoidingView i zrobić to samo

3:12czyli props.children okej no

3:17i zobaczmy czy to nam się uda zrobić czyli to

3:22sobie usuwamy nie wiem czy mi sie to samo zaktualizowało

3:26tak coś

3:31jest nie tak wydaje mi się że musimy tutaj dodać nawiasy

3:36nie on nam

3:40to usuwa dobra żeby tutaj się nie zagłębiać w tym na razie to opakujmy to

3:44po prostu View a oczywiście

3:52to nie ma spread'a widzicie tak to jest jak się robi na

3:56szybko reload okej i teraz co się dzieje na androidzie działa

4:02na iOS-ie nie

4:06działa czyli a nie

4:10działa dlatego że nie mam ustawionego behavior chciałem ponarzekać na

4:14to że źle coś zrobiłem ale nie jest aż tak źle zobaczmy teraz jest

4:18super iOS działa android działa zreloadujmy

4:23to żeby mieć pewność jest okej no

4:29jest okej czyli teraz możemy usunąć to zostawić kontenery i to też powinno

4:33już działać działa

4:38działa a fajne jest to we flipperze

4:43że możemy sobie to podejrzeć czyli mamy naszego iOS-a

4:47sam nasz layout zauważcie przepraszam

4:51tutaj to zrobimy zauważcie

4:56że tu sobie odświeżmy tylko reload zróbmy że

5:01mamy w naszej hierarchii KeyboardAvoidingView KeyboardAvoidingView okej tak

5:05i to nam działa natomiast jeśli to samo zrobimy sobie na androidzie reload

5:09żeby on nam pobrał wartość z tego to zauważcie że mamy SafeAreaView

5:13i ProfileScreen czyli jest okej tak jakby zresztą widać że to działa ale ten

5:18nasz mały hak ten nasz kontener rozwiązuje problem natomiast

5:23to całkiem nieładnie wygląda że jest to tak tu wrzucone więc zróbmy

5:27sobie osobny plik który nazwiemy ProfileContainer.js i

5:31wyeksportujmy sobie to wszystko

5:35żeby się tam nie bawić z tymi importami w tej chwili i zrobimy

5:39export default ProfileContainer

5:46no to narazie

5:50to nam nie jest potrzebne a resztę możemy zostawić nic

5:55nas te dodatkowe importy nie bolą okej możemy

6:00już to wywalić i teraz oczywiście musimy

6:05sobie zaimportować to ProfileContainer musimy zaimportować

6:10nic się niestety samo nie zaimportowało ProfileContainer

6:16from ProfileContainer przejdźmy

6:22do logów przebudujmy to no

6:27i zobaczmy jest okej jest okej no i w

6:31sumie to załatwiło nam problem i tak naprawdę moglibyśmy to zostawić i zakończyć na tym natomiast

6:37da się zrobić to chyba jeszcze trochę lepiej zwłaszcza w tym konkretnym przypadku

6:41czyli jednym rozwiązaniem jakie właśnie tutaj przedstawiliśmy jest używanie

6:45tego ifa natomiast ma to jeden problem to znaczy to się dzieje w runtime czyli

6:49mimo tego że my tą wartość znamy od początku jakby uruchamienia

6:53aplikacji nie zmieni nam się system trakcie działania aplikacji to

6:57jednak całe te decyzje cały ten ten ten warunek który tutaj jest jest wywoływany

7:02w trakcie runtime'u i teraz może być tak że będziemy

7:06na androidzie korzystać z bibliotek które na przykład nie są dostępne na iOS-ie i odwrotnie i

7:10wtedy to nam się może po prostu nie zbudować dlatego że nie

7:14zbuduje nam się to na iOS-ie ponieważ nie będzie widział tych bibliotek albo

7:19po prostu nie chcemy chcemy to zoptymalizować

7:23żeby ten kod po prostu żeby tej ten warunek logiczny się w ogóle nie wykonywał

7:27bo w sumie po co ma się wykonywać skoro on nigdy się nie zmieni i tutaj możemy

7:31zrobić coś fajnego czyli drugi drugą metodę podziału plików względem

7:35platformy i możemy sobie zrobić nowy plik który nazwiemy tak samo jak tamten poprzednim czyli ProfileContainer

7:40i tutaj nazwać nazwę platformy czyli na przykład

7:45możemy zrobić ios.js

7:49i teraz zrobimy sobie dokładnie to samo z tą różnicą

7:53że w iOS-ie będzie

7:57nasz KeyboardContainingView to nam już nie jest potrzebne

8:01a na androidzie już ten warunek też nam nie

8:05jest potrzebny po prostu zwrócimy fragment z dziećmi

8:11i teraz patrzcie co się dzieje przebudujemy sobie nasz projekt klikamy

8:17nie działa klikamy działa czyli

8:22jest prawie okej trzeba to zdebugować czemu tutaj nam to ProfileContainer

8:28wiecie

8:32co dla pewności że ja nic nie schrzaniłem ale nie upieram się że

8:36nic nie schrzaniłem to sobie jeszcze raz odpalimy nasz projekt i

8:43zobaczymy bo może z racji tego że ten plik został podzielony to musimy sobie to jeszcze

8:47raz odpalić no wygląda wszystko okej dobra

8:53zbudowało nam się to odpalmy

8:58sobie jeszcze raz aplikację okej

9:02okej działa nam czyli po prostu trzeba było rozbudować i zróbmy to samo jeszcze

9:06z androidem TestProject

9:11i działa nam to

9:17na androidzie czyli tak jak pokazaliśmy są dwa rozwiązania

9:22w jaki sposób możemy tworzyć platform przez flipper

9:26i mi sie osobiście wydaje że to trochę zależy od przypadku w tym konkretnym takie

9:30rozwiązanie jest fajniejsze bo jakby nie musimy się martwić tym żeby

9:34ładować coś co nie będzie użyte żeby robić jakieś warunki które zawsze będą

9:38true albo zawsze będą false na danej platformie więc w takim wypadku fajnie sobie użyć właśnie

9:42podziału tych plików natomiast jeśli to są jakieś prostsze rzeczy

9:46typu no nie wiem na androidzie chcielibyśmy troszeczkę inaczej coś wystylować albo

9:50inaczej coś wyświetlić to wtedy sobie możemy użyć właśnie tego platforma os-a

9:55i dodać sobie taki warunek is android czy tam is iOS

10:00z tym działać no to tyle jeśli chodzi o tą krótką lekcję