Dowiedz się, jak zbudować solidny system nawigacji dla aplikacji React Native, korzystając z biblioteki React Navigation.

Aplikacje mobilne powinny mieć system nawigacji, który bez wysiłku prowadzi użytkownika przez różne ekrany i funkcjonalności.

React Navigation, potężna i elastyczna biblioteka nawigacji dla React Native, może pomóc Ci stworzyć takie doświadczenie. Wykorzystując jego możliwości, możesz bez wysiłku zbudować świetny mobilny system nawigacyjny.

Instalowanie React Navigation Library

React Navigation oferuje trzy główne wzorce nawigacji, a mianowicie nawigację stosu, kart i szuflady do budowania systemu nawigacji. Te wzorce nawigacji zapewniają ramy do organizowania i zarządzania nawigacją między różnymi ekranami w Twojej aplikacji.

Aby rozpocząć korzystanie z React Navigation, zainstaluj bibliotekę i jej niezbędne zależności:

npm zainstaluj @react-navigation/native
npm install reagowanie-natywne-ekrany reagowanie-natywny-bezpieczny-obszar-kontekst

Konfigurowanie Nawigatora

Każdy nawigator w React Navigation żyje we własnej, oddzielnej bibliotece. Aby użyć któregokolwiek z nawigatorów, będziesz musiał zainstalować je indywidualnie.

instagram viewer

Przemyślana struktura projektu przyda się podczas budowania systemu nawigacji dla Twojej aplikacji mobilnej. Dobrą praktyką jest tworzenie tzw źródło folder w katalogu głównym twojego projektu. Wewnątrz tego folderu powinieneś mieć plik ekrany teczka. Posłuży to do oddzielenia komponentów ekranu od innych komponentów.

Będziesz pisać kod, aby skonfigurować wzorzec nawigacji, którego używasz w swoim projekcie Aplikacja.js plik.

Tworzenie Nawigatora w pliku Aplikacja.js file jest najlepszą praktyką z kilku powodów:

  • The Aplikacja.js plik jest zwykle komponentem najwyższego poziomu w aplikacji React Native. Zdefiniowanie Nawigatora w tym pliku zapewni, że hierarchia nawigacji będzie na najwyższym poziomie drzewa komponentów i będzie dostępna w całym drzewie.
  • Umieszczenie Nawigatora w Aplikacja.js umożliwia łatwy dostęp i przekazywanie stanu całej aplikacji i rekwizytów do ekranów w nawigatorze.
  • Zareaguj Nawigacja NawigacjaKontener zapewnia niezbędny kontekst do nawigacji i zazwyczaj znajduje się wewnątrz Aplikacja.js. Umieszczając Navigator w tym samym pliku, możesz łatwo zintegrować go z NawigacjaKontener.

Nawigator stosu

Stack Navigator to najpopularniejszy wzorzec nawigacji w bibliotece React Navigation. Wykorzystuje strukturę danych stosu, w której każdy ekran jest zupełnie innym komponentem i jest nałożony na poprzedni.

Kiedy nowy ekran zostanie przesunięty na górę stosu, staje się on aktywnym ekranem, a poprzedni ekran jest wrzucany pod niego. Pozwala to użytkownikom na poruszanie się tam iz powrotem po stosie, podobnie jak w przypadku nawigacji w witrynie. Możesz skonfiguruj nawigator stosu, aby przechodził z jednego ekranu do drugiego.

Na przykład:

import Reagować z'reagować';
import { Kontener nawigacyjny } z„@react-navigation/native”;
import { utwórzStackNavigator} z'@react-navigation/stos';
// Importuj komponenty ekranu
import Ekran główny z„./ekrany/ekran główny”;
import SzczegółyEkran z„./screens/DetailsScreen”;


konst Stos = utwórzStackNavigator();


konst Aplikacja = () => {
powrót (


"Dom" składnik={ekran główny} />
"Detale" składnik={EkranSzczegółów} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
eksportdomyślny Aplikacja;

Powyższy blok kodu tworzy komponent Stack Navigator za pomocą createStackNavigator() z biblioteki nawigacji.

W tym przykładzie Stack Navigator ma dwa ekrany: Dom I Detale.

Teraz zainstaluj nawigator stosu:

npm zainstaluj @react-navigation/stack

Wewnątrz Ekran główny, możesz skorzystać z tzw nawigacja obiekt do testowania Nawigatora stosu:

import { Arkusz stylów, widok, przycisk } z„reaguj natywnie”;
import Reagować z"reagować";
konst Ekran główny = ({ nawigacja}) => {
powrót (

 tytuł="Nawigować do .."
 onPress={() => nawigacja.nawigacja(„Ekran szczegółów”)}
 />
 </View>
 );
};


eksportdomyślny Ekran główny;
konst style = StyleSheet.create({});
2 Obrazy

Zwróć uwagę, jak nawigator stosu automatycznie tworzy przycisk strzałki, aby obsługiwać nawigację wstecz do poprzednich ekranów.

Nawigator zakładek

W niektórych sytuacjach posiadanie systemu nawigacji do przodu i do tyłu, takiego jak Stack Navigator, nie zapewnia wspaniałego doświadczenia. W takich przypadkach lepiej nadaje się Tab Navigator. Wyświetla ekrany nawigacji dostępne z góry dla użytkownika i może być łatwiejszy w użyciu, jak pasek nawigacji internetowej.

Aby rozpocząć, zainstaluj @react-navigation/bottom-tabs korzystanie z biblioteki menedżer pakietów NPM.

Z createBottomNavigator(), możesz utworzyć instancję Nawigatora kart, podobnie jak w przypadku Nawigatora stosu:

import { createBottomTabNavigator } z'@react-navigation/bottom-tabs';
konst Tab = createBottomTabNavigator();

Następnie zdefiniuj żądane ekrany jako karty w nawigatorze i NawigacjaKontener:

eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (


 imię="Dom"
 składnik={ekran główny}
 opcje={{ tytuł: "Dom" }}
 />
 imię="Profil"
 składnik={Ekran Profilu}
 opcje={{ tytuł: "Profil" }}
 />
 imię="Detale"
 komponent={DetailScreen}
 opcje={{ tytuł: "Detale" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Podczas uruchamiania aplikacji powinieneś zobaczyć nawigator kart ze zdefiniowanymi ekranami u dołu.

3 obrazy

Mógłbyś użyć tabBarPosition omożliwość ustawienia nawigatora na szczyt, Prawidłowy, lewy, Lub spód (domyślny).

Nawigator szuflad

Nawigatorzy szuflad lub szuflady to powszechny wzorzec nawigacji w aplikacjach mobilnych. Szuflady można otwierać, przesuwając palcem lub dotykając przycisku. Powoduje to wysunięcie szuflady z boku ekranu, odsłaniając jej zawartość.

2 Obrazy

Aby korzystać z Nawigatora szuflad, zainstaluj go razem z Reaguj natywną obsługą gestów I Reaguj-rodzimy-reanimowany:

npm zainstaluj @react-navigation/drawer
npm install reagowanie na natywną obsługę gestów reagowanie na natywną reanimację

Będziesz także musiał skonfigurować reanimację w swoim babel.config.js plik:

moduł.eksport = {
 presety: ["babel-preset-expo"],
 wtyczki: [„React-native-reanimowany/plugin”],
};

Oto przykład konfiguracji Nawigatora szuflad:

import„Reaguj natywnym programem do obsługi gestów”; // Ten import musi być na górze
import { Widok, tekst, przycisk } z„reaguj natywnie”;
import { createDrawerNavigator } z"@react-navigation/drawer";
import { Kontener nawigacyjny } z"@react-navigation/native";


konst Szuflada = createDrawerNavigator();


konst Zawartość szuflady = ({ nawigacja}) => {
powrót (
przewód: 1, wyrównaj elementy: "Centrum", uzasadnij treść: "Centrum" }}>
rozmiar czcionki: 24, grubość czcionki: "pogrubiony" }}>
 Witamy w Szufladzie
 </Text>

 To jest dodatkowa zawartość, którą możesz wyświetlić W szuflada.
 </Text>


konst Aplikacja = () => (

 początkowa nazwa trasy ="Dom"
 szufladaZawartość={(rekwizyty) => <Zawartość szuflady {...rekwizyty} />}
 >
 {/* Twoje inne ekrany tutaj */}
 </Drawer.Navigator>
 </NavigationContainer>
);
eksportdomyślny Aplikacja;

W tym przykładzie Zawartość szuflady składnik jest przekazywany jako zawartość szuflady podpora do createDrawerNavigator. W środku Zawartość szuflady komponent, możesz dostosować zawartość, aby wyświetlić żądane informacje za pomocą komponentów tekstowych lub dowolnych innych elementów i stylów.

Nawigatory kart są statyczne i zawsze widoczne. Nie zawsze jest to najlepsze rozwiązanie, ponieważ zakładki blokują części ekranu i mogą odciągać uwagę od ekranu głównego. Możesz użyć szuflad jako dynamicznego nawigatora kart i utworzyć menu nawigacji w szufladach. Użytkownicy mogą następnie otworzyć szufladę, aby znaleźć menu nawigacyjne.

Możesz także użyć szuflady do wyświetlenia dodatkowej zawartości, takiej jak pasek wyszukiwania, profil użytkownika, informacje kontekstowe lub cokolwiek, co nie wymaga widoku pełnoekranowego.

Rozważ te najlepsze praktyki, aby jak najlepiej wykorzystać Nawigator szuflad:

  • Unikaj przytłoczenia szuflady zbyt wieloma opcjami i skup się na przedstawieniu najistotniejszych i najczęściej używanych funkcji.
  • Klasyfikuj powiązane elementy w sposób logiczny i intuicyjny, aby pomóc użytkownikom szybko znaleźć to, czego szukają.
  • Użyj ikon lub wskaźników wizualnych, aby pomóc użytkownikom zrozumieć przeznaczenie każdego elementu w szufladzie.

Przekazywanie danych za pomocą rekwizytów nawigacyjnych

React Navigation zapewnia potężny mechanizm, który pozwala przekazywać dane przez rekwizyty nawigacyjne.

Rozważ scenariusz, w którym masz listę elementów na jednym ekranie, a gdy użytkownik wybierze element, chcesz przekazać odpowiednie dane na inny ekran.

Najpierw musisz zdefiniować strukturę nawigacji. Teraz, aby przekazać dane z Ekran główny do Ekran Szczegółów po wybraniu elementu, w środku Ekran główny zdefiniuj funkcję, która obsługuje nawigację i zawiera dane, które chcesz przekazać.

import Reagować z'reagować';
import { Widok, tekst, przycisk } z„reaguj natywnie”;
konst Ekran główny = ({ nawigacja}) => {
konst handleItemPress = (przedmiot) => {
 nawigacja. nawigacja („Ekran szczegółów”, { przedmiot });
 };


powrót (

Lista z Przedmioty</Text>
eksportdomyślny Ekran główny;

The uchwytPozycjaNaciśnij funkcja wykorzystuje tzw nawigacja. nawigacja sposób nawigowania do Ekran Szczegółów przekazując wybrane dane pozycji jako parametr w drugim argumencie.

Aby mieć dostęp do przekazywanych danych wewnątrz Ekran Szczegółów składnik, będziesz potrzebować nawigacja rekwizyt:

import Reagować z'reagować';
import { Widok, tekst } z„reaguj natywnie”;
konst Ekran szczegółów = ({ nawigacja}) => {
konst pozycja = nawigacja.getParam('przedmiot', '');


powrót (

Ekran szczegółów</Text>
{pozycja}</Text>
 </View>
 );
};
eksportdomyślny Ekran szczegółów;

Tutaj Ekran Szczegółów zastosowania komponentów navigation.getParam aby pobrać przekazany element z rekwizytów nawigacyjnych. W tym przykładzie ustawiona jest domyślna wartość pustego ciągu na wypadek, gdyby dane były niedostępne. W ten sposób Twoja aplikacja nie ulegnie awarii podczas renderowania.

W zależności od złożoności aplikacji możesz eksplorować za pomocą bibliotek zarządzania stanem, takich jak Redux lub kontekstowy interfejs API do globalnego zarządzania i udostępniania danych.

Organizowanie kodu nawigacyjnego

Właściwa organizacja kodu nawigacyjnego pomoże Ci zbudować skalowalną i współpracującą aplikację React Native. Możesz to zrobić, dzieląc logikę nawigacji na łatwe do zarządzania moduły. Ułatwi to czytanie i zrozumienie.

Dzięki temu możesz mieć pewność, że stworzysz bezproblemową nawigację dla swoich użytkowników, jednocześnie ciesząc się doświadczeniem programistycznym.