Joanna
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:
Czytaj więcej
Joanna
Zapisywanie i odczytywanie danych z AsyncStorage
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.
Czytaj więcej
Joanna
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 […]
Czytaj więcej
Joanna
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.
Czytaj więcej
Joanna
Jak edytować dane pojedynczej pozycji na flatliście?
Do edytowania listy potrzebna jest nam… lista 🙂 Jeśli chcesz dowiedzieć się, jak stworzyć listę zadań, zobacz ten wpis: Renering list in React Native
Czytaj więcej
Joanna
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 […]
Czytaj więcej
Joanna
Renderowanie listy elementów za pomocą ScrollView i FlatListy
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.
Czytaj więcej
Joanna
Jak dopasować wysokość i szerokość elemetu w React Native?
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.
Czytaj więcej
Joanna
Jak ustawić wysokość i szerokość przycisku w React Native?
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 […]
Czytaj więcej
Joanna
Lista To-Do w React.js i Redux
Lista To-Do w React.js i Redux – przykład Pierwszy projekt w React? Aplikacja To-do wydaje się dobrym pomysłem, jeśli chce się zacząć stawiać pierwsze kroki. W mojej aplikacji wykorzystałam react.js i redux. Jest to aplikacja webowa, można korzystać z niej w przeglądarce zarówno w komputerze, jak i w telefonie (choć niestety w wersji mobile nie […]
Czytaj więcej