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.

Dopasowanie wymiarów elementów używanych podczas tworzenia aplikacji w React Native często przysparza problemów. Dlatego przyjrzymy się kilku sposobom, które pomogą lepiej dopasować szerokość i wysokość zarówno w odniesieniu do elementu-rodzica, jak i w odniesieniu do ekranu.

Często zdarza się, że chcemy zmienić wymiary button-a, który domyślnie rozciągnięty jest na całą szerokość elementu-rodzica. O ile zmniejszenie jego szerokości nie stanowi problemu – wystarczy zmniejszyć szerokość rodzica, o tyle zmiana wysokości jest już problematyczna. Element Button nie posiada właściwości style, dlatego poza zmianą koloru tekstu na iOS i koloru tła na Androidzie niewiele możemy w nim ustawić.