Często spotyka się aplikacje napisane w React Native, które używają dwóch lub więcej nawigatorów na raz. Sama miałam problem z połączeniem stack nawigatora i drawer navigatora, na szczęście udało mi się połączyć je tak, aby działały poprawnie i teraz mogę się tą wiedzą podzielić.

Przekazanie opcji otwarcia drawer navigatora do nagłówka stack nawigatora jest dość proste, choć początkowo może przysporzyć problemów. Widać to choćby po ilości pytań zadawanych na portalach programistycznych. Dlatego przedstawię tutaj skróconą wersję kodu, który pokaże, jak osiągnąć taki efekt.

Jeśli masz problem ze zrozumieniem działania Drawer navigation, ten krótki tutorial pomoże Ci zaimplementować DrawerNavigator do swojej aplikacji.

Aplikacje mobilne często używają więcej niż jednego ekranu, aby odpowiednio zaprezentować dane. W jaki sposób możemy stworzyć więcej niż jeden ekran? Do tego właśnie służy StackNavigator.

Aby móc używać nawigacji pomiędzy ekranami, musisz w folderze ze swoim projektem zainstalować bibliotekę o nazwie react-navigation. Możesz to zrobić wpisując kolejno polecenia:

W poprzednim wpisie: React Native editable list pokazałam, jak można edytować dane pojedynczego elementu listy. Edytowane dane zapisane zostały do stanu komponentu, co pozwoliło wyświetlić je na ekranie. Jednak po zamknięciu aplikacji dane resetują się i nie zostają zapamiętane. Jak to zmienić? Z pomocą przyjdzie AsyncStorage.

Jak zaktualizować stan rodzica z komponentu dziecka w React Native ?

Przekazywanie danych z komponentu dziecka do komponentu rodzica jest łatwe. Wystarczy, że umieszczając komponent dziecko w treści rodzica przekażemy do niego funkcję, która ustawia w stanie komponentu rodzica odpowiednie dane, a następnie uruchomimy te dane z komponentu dziecka, np. poprzez kliknięcie w przycisk. Schemat przedstawia się następująco:

Komponent Modal posiada wiele zastosowań. Bardzo często używany jest jako „okienko” , w którym można wykonać dodatkowe akcje, których rezultaty możemy oglądać na ekranie. Modal może służyć np. jako okienko logowania, okienko z informacją albo okienko z opcjami do wyboru.

Do edytowania listy potrzebna jest nam… lista 🙂 Jeśli chcesz dowiedzieć się, jak stworzyć listę zadań, zobacz ten wpis: Renering list in React Native

Jak wiemy z dokumentacji React Native, ScrollView renderuje wszystkie swoje dzieci na raz, co przy dużej ich ilości może powodować problemy z wydajnością. Istnieje jednak sposób, by rozłożyć renderowanie dużej ilości danych w czasie tak, aby użytkownik nie odczuł tych problemów. Możemy wyświetlić przykładowo 20 elementów przy pierwszym wczytaniu danych i dodawać kolejno nowe elementy w miarę przewijania listy. Tak stworzymy „niekończące się” przewijanie, tzw. „infnite scroll”.

Ok, chcemy wyświetlić listę elementów w React Native. Możemy to zrobić na kilka sposobów, tutaj przedstawione zostaną dwa – ScrollView i FlatList.