React Native: ScrollView

0.62.2+

0:00To w poprzednich lekcjach zrobiliśmy sobie całkiem fajny i użyteczny profili rozwiązaliśmy

0:04parę problemów które mieliśmy tutaj choćby z klawiaturą stworzyliśmy

0:08sobie Platform Specific Code super natomiast

0:13chciałbym się teraz zająć czymś troszkę bardziej skomplikowanym otóż listami zapewne

0:17jesteście użytkownikami smartfonów i zauważyliście że tak

0:22naprawdę większość aplikacji to są bardzo długie listy przykład facebook Youwall instagram

0:27i tego typu aplikacje wszędzie tam przewijają się listy i w

0:31aplikacjach natywnych w systemach natywnych już od pierwszych

0:35wersji wsparcie dla takich list było bardzo dobrze wspierane znaczy rozwiązania

0:40były bardzo bardzo dobrze zrobione tak żeby te listy działały całkiem

0:44spoko kiedy teraz patrzymy na to wszystko to może

0:48nie widać aż tak bardzo ale jak odpalimy to sobie na starym iphone na przykład ja posiadam iphone'a 3g

0:52i zobaczymy jak wygląda lista w przeglądarce jakaś

0:56długa versus lista w aplikacji to widać diametralną różnicę

1:01zaraz pokażę wam dokładnie o co chodzi żeby to zademonstrować w jakimś

1:05stopniu no to musimy zrobić sobie jakąś listę no i najprostszym rozwiązaniem będzie zrobić

1:09po prostu listę Todo którzy wszyscy wszędzie robią ale uważam

1:14że na start to będzie super no i zaczniemy sobie od zrobienia

1:18jakiegoś komponentu swoją drogą cofnę się tutaj to też nie jest związane

1:22stricte z naszym kursem natomiast jako korzystacie z VS Code'a

1:26czy jakiegokolwiek z innego edytora to mega polecam tworzenie snippetów

1:30snippety to jest takie narzędzie które pozwala nam poprzez taki skrót tworzyć sobie własny

1:35kod i jest to super fajne bo oszczędza nam mnóstwo czasu ja

1:39mam tych snippetów trochę porobione na przykład do testów mam jakieś

1:43tam przygotowane template'y jeśli chciałbym testować komponent testować hooks czy

1:47cokolwiek takiego tak więc taka taka mała dygresja dobra

1:51lecimy z tym komponentem a nazwijy ją sobie TodoLlist zapisz

1:59to nie TypeScript znowu tutaj kolejna

2:04mała dygresja ja korzystam z TypeScripta i zachęcam was do korzystania z TypeScripta ale

2:08nie uznałem że nie będę w konkursie tego poruszać bo to trochę nie jest związane

2:12z tematem natomiast warto warto od samego początku w

2:16tego TypeScripta iść okej i teraz zamiast

2:21naszego profilu na kóry na chwilę pominiemy to dodamy sobie naszą Todo listę

2:25fajnie że nam sie zaimportowało i zobaczmy co się dzieje

2:29świetnie stało się nicość czarność bo nic na tej liście nie mamy

2:33to co chcielibyśmy mieć to

2:37może na przykład ekran biały to już zawsze sprawi że będzie fajniej dobra mamy

2:42coś takiego i od czego zacząć no chciałbym

2:47przede wszystkim mieć listę czegoś nazwijmy to taski tasks

2:51setTasks useState

2:56i na początku niech tam będzie

3:02task1 other task something

3:09whatever okej no i

3:15chciałbym mieć możliwość dodawania tych tasków więc zrobimy sobie

3:19troszeczkę tutaj logiki UI

3:23czyli tak zaczniemy od zrobienia jakiegoś pola tekstowego do wpisania

3:27takiego nowego taska więc nazwiemy to sobie TaskText Input

3:41nie zaimportowało nam się to już dodajemy świetnie

3:47to co mam będzie potrzebne to jest na pewno jeszcze AddTaskButton

3:51styled

3:56TouchableOpacity

4:03i oczywiście AddTaskButtonText

4:14no i tutaj też musimy sobie zaimportować okej

4:21i tak tu zrobimy sobie color white tu

4:25zrobimy sobie background color

4:29blue damy width 100 procent

4:34height 50px justify center

4:39align-items center i jeszcze

4:45sobie owrapujemy tą nazwijmy to Header na przykład

4:49Header

4:56i na razie nic z tym nie robimy więc zaczynamy od wprowadzenia naszego Headera

5:01Header nie Headers tutaj dodamy

5:05nasz TaskTextInput

5:11a tutaj

5:16dodamy AddTaskButton no i

5:21tu dodamy AddTaskButtonText którym będzie ADD

5:26no i zobaczmy co tutaj się wydarzyło okej coś tam jest pierwszy

5:30problem SafeArea więc dajmy

5:35sobie tutaj SafeAreaView pewnie to powinno

5:39znajdować się w naszym App.js-ie a nie tutaj ale na

5:43razie możemy tak zostawić to nie jest żeden problem coś

5:50tutaj nie siadło załadujemy to jeszcze raz

5:54okej

6:00bo czyli jest okej tylko po prostu dodałbym background color

6:06tego Headera żebyśmy widzieli w ogóle czyli na przykład eeeeee okej

6:12czyli to nie wystaję tylko po prostu ten TextInput nie ma wysokości coś tu zmieniamy na przykład 50 pixeli świetnie

6:22padding 8 pixeli dobra

6:28i dodamy jeszcze placeholder new

6:36task nie czemu z wielkiej litery niech będzie z małej okej

6:44jakoś jest lepiej lub gorzej ale coś tam jest świetnie dodamy

6:50sobie obsługę tego buttona i w ogóle tego pola tekstowego

6:54to tak to to niestety taki musimy troszeczkę tego boilerplate'u narobić ale

6:58żeby miało to sens to tak będzie lepiej

7:09oj przepraszam i wyświetlmy sobie to czyli value

7:13to się równa

7:18onChangeText to się równa

7:22setCurrentText i dodajmy sobie

7:27function onAddTask if currrentText

7:32length mniejsze od 3 return

7:37i tutaj sobie dodamy tego taska onPress

7:47to się równa onAddTask tak naprawdę to co w tej chwili robimy to jest

7:51ta sama logika korzystamy z buttonów takich skrutów z których korzystaliśmy w tamtej

7:55lekcji okej i chyba tyle

8:01natomiast teraz chcielibyśmy dodać wyświetlić

8:06nasze elementy więc to co zrobimy to nazwiemy to sobie

8:10ListsWrapper żeby tam jakoś ładniej się to nam prezentowało

8:15dobra bym

8:22tutaj jest ListWrapper i w tym miejscu wyświetlimy

8:27sobie wszystkie nasze elementy czyli

8:32tasks.map t i na przykład

8:36wyświetlmy narazie taki po prostu zwykły tekst niech to będzie tutaj fajnie

8:42coś tam się wyświetla mamy naszą jakąś tam listę jeśli

8:46ja dodam coś tam to nic się nie dzieje ciekawe

8:51nic się dzieje bo nic nie dodajemy setTask

8:55dodajmy nasze tasks

9:00i dodajmy currentText i oczywiście

9:04setCurrentText zostawmy puste no i teraz

9:08już to powinno wyglądać trochę lepiej okej coś tam się dzieje coś dodajemy to już nie musimy przykrywać

9:13tej klawiatury mamy tą liste czyli mamy taką podstawową listę z

9:17jakimiś elementami natomiast nie wygląda to najlepiej więc dodajmy sobie jakiś

9:21element to nazwijmy ListItem w

9:29której będzie będziemy który będzie tym itemem

9:33który będzie wyświetlał ten element listy on w propsach

9:37będzie dostawać cokolwiek info niech to się nazywa

9:44InfoText no i niech to po prostu będzie duże

9:5120 pixeli color niech będzie

9:55gray to damy jeszcze justify-content center

10:00align-items center już

10:06prawie dochodzimy do do tej faktycznej listy tylko jeszcze tutaj

10:10to poprawmy dajmy tu InfoText

10:15bez tego info okej no

10:20i teraz w tym miejscu zamiast czegoś takiego

10:24to dodamy ListItem info

10:29to się równa nasze t działa no

10:34prawie tak nie chcemy żeby to miało wysokość 100 chcemy

10:39żeby to miało wysokość no 80 pixeli okej

10:43i dodajmy jakiś magines bo gdzieś tam się gubią te elementy 10 pixeli

10:48okej mamy naszą listę no

10:52i dodawajmy zobaczmy czy na androidzie też działa jest na androidzie tak jakoś

10:56mniej acha no tak bo ocywiście nie dodaliśmy na androidzie żadnej dodajmy

11:00new coś tam something coś

11:05tam bla bla bla bla bla bla bla no

11:09i fajnie tylko jak widzicie problem jest taki że teraz tej listy

11:13nie możemy scrollować bo domyślnie nawet jak te elementy wykraczają

11:17poza te dzieci tego elementy wykraczają poza rodzica to

11:22nie ma takiej opcji żeby tam przewinąć i to w jakiś sposób przescrollować tak jak to może być domyślne

11:26w przeglądarce jeśli po prostu jakiś element jest większy co możemy w tej chwili zrobić

11:30w tej chwili musimy użyć właśnie naszego naszego

11:34komponentu ScrollView czyli

11:39zrobimy sobie tutaj const nazwijmy to List

11:43bo będzie to forma listy ScrollView

11:51musimy to oczywiście zaimportować i

11:57tutaj opakujmy to w listę okej

12:05i co się teraz dzieje jak widzicie teraz możemy

12:09sobie tą listę scrollować z tą różnicą że widzicie tutaj ten ostatni element gdzieś nam

12:13wyjeżdża to wynika z tego że ta lista nie ma ustawionej wysokości ten Wrapper

12:17nie ma ustawionej wysokości więc pewnie próbuje po prostu

12:21się dopasować do wysokości dzieci ale jeśli mu ustawimy flex 1 to

12:28powinno być okej to powinien się dopasować do dokładnie tak do

12:32tego co mamy widoczne sprawdźmy czy na androidzie też to działa okej coś

12:39tam coś tam coś tam coś tam coś tam coś tam

12:43jest okej tak

12:47czyli naszą zrobioną naszą pierwszą listę super i teoretycznie

12:51moglibyśmy na tym zakończyć i myślę że w większości może nie w większości przypadków ale w wielu

12:56przypadkach tak naprawdę to rozwiązanie wystarczy to znaczy

13:00mamy tą listę to działa działa fajnie scrolluje się jak widać nie ma z tym żadnego

13:04problemu natomiast problem pojawi się jeśli tych elementów będzie całkiem dużo

13:08zrobimy sobie tutaj sobie zapisałem taki

13:12skrypcik bo jakbym zapomniał o jeśli

13:19byśmy zrobili sobie coś takiego żeby na starcie Elements

13:25albo inaczej żeby przy dodawaniu

13:29dodało się bardzo dużo różnych elementów new

13:35Elems dokładnie czyli

13:40to jest jakby taki mały no nie hak ale po prostu taka

13:44możliwość w JS-ie żeby sobie stworzyć takiego Arraya z 1000 elementów

13:48i mapować po nim i każdy taki element będzie się składać będzie

13:53tekstem w którym będzie po prosto element i nazwa tego

13:57elementu czyli w tym przypadku będzie jakaś liczba no i zróbmy tak żeby tutaj

14:02po kliknięciu dodaj żeby dodać te nasze 1000

14:06elementów a żeby być pewnym że to wszystko działa

14:10okej to sobie odświeżmy o coś nam się tu schrzaniło nieistotne

14:14czasem się ten bundler nam lubi zgubyć okej

14:19odświeżmy sobie reload odświeżmy

14:24tu i teraz dodam jakiegoś taska i klikam

14:28dodaj no i patrzcie co się dzieje no

14:35właśnie nasza lista powstała mamy tych te 1000

14:39elementów natomiast no trwało to całkiem dużo i teraz to

14:43samo możemy zrobić tutaj pewnie to będzie trochę szybciej tak bo

14:48to jednak jest symulator plus to jest iOS natomiast dalej zauważcie że trwało

14:52to całkiem pokaźny czas i teraz gdyby tych elementów nie było dużo

14:56pewnie nie byłoby problemu natomiast no skoro dodaliśmy ich 1000 naraz

15:00czyli na takim wallu facebooka to niestety po pewnym czasie scrollowania to

15:05po prostu by się wszystko wykrzaczyło i jak sobie radzić z tym

15:09jak sobie radzić z tym problemem no jakby za

15:13pomocą samego ScrollView to niestety wiele nie zrobimy mimo tego że lista jest prosta i łatwa to

15:18jednak działa na tej zasadzie że w momencie w

15:22którym dodaliśmy te elementy to tak naprawdę wyrenderowaliśmy 1000 elementów które gdzieś tam

15:26w dół w dół są niewidoczne na ekranie i w następnej

15:30lekcji pokażę wam jak to zoptymalizować za pomocą fajnych narzędzi

15:35React Native'owy do właśnie tworzenia takich zaawansowanych list