• Home
  • Archive by category "React Native"

StackNavigator wewnątrz DrawerNavigator – połączenie dwóch nawigatorów w jednej aplikacji


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ć.

Read More StackNavigator wewnątrz DrawerNavigator – połączenie dwóch nawigatorów w jednej aplikacji

Przykład nawigowania pomiędzy ekranami – React Native StackNavigator example

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:

Read More Przykład nawigowania pomiędzy ekranami – React Native StackNavigator example

Jak przekazać dane z komponentu dziecka do komponentu rodzica w React Native?


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:

Read More Jak przekazać dane z komponentu dziecka do komponentu rodzica w React Native?

Modal w React Native tutorial


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.

Read More Modal w React Native tutorial

Poprawa wydajności ScrollView – infinite scroll


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”.

Read More Poprawa wydajności ScrollView – infinite scroll