Aplikacje Mobilne Strona 1
Aplikacje mobilne
Nawigacja
Mateusz Pawełkiewicz
Aplikacje Mobilne Strona 2 W przeglądarce internetowej możemy tworzyć łącza do różnych stron za pomocą znacznika kotwicy (<a>). Gdy użytkownik kliknie link, adres URL jest przekazywany do stosu historii przeglądarki. Gdy użytkownik naciśnie przycisk wstecz, przeglądarka wyskakuje element z góry stosu historii, więc aktywna strona jest teraz stroną poprzednio odwiedzaną. React Native nie ma wbudowanej koncepcji globalnego stosu historii, jak ma to miejsce w przeglądarce internetowej – w tym miejscu do historii wkracza React Navigation.
Natywny nawigator stosu React Navigation umożliwia aplikacji przechodzenie między ekranami i zarządzanie historią nawigacji. Jeśli aplikacja używa tylko jednego nawigatora stosu, jest on koncepcyjnie podobny do tego, jak przeglądarka internetowa obsługuje stan nawigacji —aplikacja wypycha i usuwa elementy ze stosu nawigacyjnego, gdy użytkownicy wchodzą z nim w interakcję, co powoduje, że użytkownik widzi różne ekrany. Kluczową różnicą między tym, jak działa to w przeglądarce internetowej i w React Navigation, jest to, że natywny nawigator stosu React Navigation zapewnia gesty i animacje, których można się spodziewać w systemach Android i iOS podczas nawigowania między ekranami.
@react-navigation/native-stack
npm install @react-navigation/native-stack yarn add @react-navigation/native-stack
createNativeStackNavigator to funkcja, która zwraca obiekt zawierający 2 właściwości:
Screen i Navigator. Oba są komponentami Reacta używanymi do konfiguracji nawigatora.
Nawigator powinien zawierać elementy Screen jako elementy podrzędne, aby zdefiniować konfigurację routes.
NavigationContainer to komponent, który zarządza naszym drzewem nawigacyjnym i zawiera stan nawigacji. Ten komponent musi obejmować całą strukturę nawigatorów.
Zwykle renderujemy ten komponent w katalogu głównym naszej aplikacji, który jest zwykle komponentem wyeksportowanym z App.js.
Aplikacje Mobilne Strona 3 Po uruchomieniu kodu, zobaczymy ekran z pustym paskiem nawigacyjnym i szarym
obszarem zawartości zawierającym składnik HomeScreen. Style widoczne dla paska nawigacyjnego i obszaru zawartości są domyślną konfiguracją dla nawigatora stosu.
Każdy ekran w nawigatorze może określać pewne opcje dla nawigatora, takie jak tytuł renderowania w nagłówku. Te opcje można przekazać we właściwościach opcji dla każdego komponentu ekranu:
Aplikacje Mobilne Strona 4 Poruszanie się między ekranami
W przeglądarce mamy dostępne kilka metod do poruszania się między ekranami.
W react navigation zamiast używać globalnego window.location, używamy właściwości navigate, która jest przekazywana do naszych komponentów ekranu.
W przypadku gdy jesteśmy na ekranie szczegółów i chcemy wejść do kolejnego zagnieżdżonego ekranu, wówczas używamy metody push() dostępnej w navigation.
Aplikacje Mobilne Strona 5 Nagłówek dostarczony przez natywny nawigator stosu będzie automatycznie zawierał
przycisk wstecz, gdy możliwe jest cofnięcie się z aktywnego ekranu (jeśli w stosie nawigacyjnym jest tylko jeden ekran, wówczas przycisk wstecz nie będzie wyświetlany.
Aby wywołać akcję cofnięcia się w aplikacji do poprzedniego ekranu należy użyć metody goBack() dostępnej w navigation.
Innym powszechnym wymogiem jest możliwość cofania się o wiele ekranów — na przykład, jeśli masz kilka ekranów głęboko w stosie i chcesz odrzucić je wszystkie, aby wrócić do pierwszego ekranu. W tym przypadku wiemy, że chcemy wrócić do Home, więc możemy użyć nawigacji('Home'). Inną alternatywą byłaby navigate.popToTop(), która wraca do pierwszego ekranu w stosie.
Aplikacje Mobilne Strona 6 Przekazywanie parametrów do routes
W większości aplikacji przechodząc z jednego ekranu na drugi zachodzi potrzeba przekazania parametrów, aby zawartość ekranu wyświetliła się poprawnie. Prostym przykładem jest sklep internetowy. Przeglądając listę produktów chcemy przejść do wybranego z nich, wówczas należy przekazać jego identyfikator na ekran ze wyświetlający szczegóły produktu.
Aplikacje Mobilne Strona 7 Aktualizacja parametrów
Ekrany mogą również aktualizować swoje parametry, tak jak mogą aktualizować swój stan.
Metoda navigation.setParams pozwala aktualizować parametry ekranu.
Parametry początkowe
Możemy także przekazać kilka początkowych parametrów na ekran. Jeśli nie określiliśmy żadnych parametrów podczas nawigowania do tego ekranu, zostaną użyte parametry początkowe. Parametry początkowe można określić za pomocą właściwości initialParams.
Przekazywanie parametrów do poprzedniego ekranu
Parametry są przydatne nie tylko do przekazywania niektórych danych na nowy ekran, ale mogą również być przydatne do przekazywania danych do poprzedniego ekranu. Załóżmy na przykład, że masz ekran z przyciskiem tworzenia wpisu, a przycisk tworzenia wpisu otwiera nowy ekran do tworzenia wpisu. Po utworzeniu wpisu chcesz przekazać dane wpisu z powrotem do poprzedniego ekranu.
Aplikacje Mobilne Strona 8 Przekazywanie parametrów do zagnieżdżonych ekranów
Aplikacje Mobilne Strona 9
Konfiguracja paska nagłówka
Ustawianie tytułu nagłówka
Używanie params w tytule
Aktualizacja nagłówka za pomocą metody setOptions()
Aplikacje Mobilne Strona 10 Dostosowywanie stylów nagłówków
Istnieją trzy kluczowe właściwości, których należy użyć podczas dostosowywania stylu nagłówka: headerStyle, headerTintColor i headerTitleStyle.
Zastąpienie tytułu niestandardowym komponentem
Czasami potrzebna jest większa kontrola niż tylko zmiana tekstu i stylów tytułu — na
przykład możemy chcieć renderować obraz zamiast tytułu lub przekształcić tytuł w przycisk.
W takich przypadkach możemy całkowicie zastąpić komponent użyty w tytule i podać własny.
Aplikacje Mobilne Strona 11
@react-navigation/bottom-tabs
npm install @react-navigation/bottom-tabs yarn add @react-navigation/bottom-tabs
Prawdopodobnie najpopularniejszym stylem nawigacji w aplikacjach mobilnych jest nawigacja oparta na kartach. Mogą to być zakładki na dole ekranu lub na górze pod nagłówkiem (lub nawet zamiast nagłówka).
Aplikacje Mobilne Strona 12 Dostosowywanie wyglądu
Aplikacje Mobilne Strona 13
@react-navigation/drawer
npm install @react-navigation/drawer yarn add @react-navigation/drawer
Aplikacje Mobilne Strona 14 Otwieranie i zamykanie nawigacji odbywa się za pomocą metod openDrawer(), closeDrawer lub toggleDrawer().
Wyświetlanie różnych routes w zależności od tego czy użytkownik jest zalogowany.
Aplikacje Mobilne Strona 15
Literatura
https://reactnavigation.org
