Nowa koncepcja routingu natywnego z routerem Expo

Routing oparty na plikach to popularna technika tworzenia stron internetowych, która odwzorowuje ścieżkę URL na określony plik w katalogu projektu. Ten system pozwala uniknąć skomplikowanych konfiguracji tras związanych z budowaniem systemów nawigacji.

Wraz z wydaniem biblioteki Expo Router routing oparty na plikach jest możliwy w aplikacjach React Native. Expo Router mógłby być lepszym systemem nawigacji dla programistów React Native pracujących z Expo.

Nowa koncepcja nawigacji z Expo Router

Router expo zapewnia deklaratywne rozwiązanie routingu dla aplikacji React Native Expo. Ten system znacznie różni się od twojego zbudować system nawigacji z wykorzystaniem React Navigation. Expo Router zmniejsza główne problemy związane z korzystaniem z obecnego działającego systemu nawigacji.

Problemy te obejmują posiadanie systemu nawigacji, który nie wszędzie działa konsekwentnie, trudności w zarządzaniu głębokimi linkami, a także złożone konfiguracje dla niestandardowych przejść nawigacji.

Nawigacja/routing oparty na plikach routera expo to prosty system, który działa dobrze i jest już znany wśród programistów JavaScript i frameworków JavaScript, takich jak Next.js, w którym możesz zdefiniować trasy.

Instalowanie i konfigurowanie routera Expo

Migracja projektu Expo ze starego systemu nawigacji do korzystania z routera Expo jest dość prosta.

Krok 1: Zainstaluj Expo Router

Użyj tego polecenia terminala, aby uruchomić instalator routera expo:

npx expo zainstaluj expo-router

Musisz także upewnić się, że zainstalowałeś te zależności równorzędne:

• kontekst-natywny-bezpieczny-obszar-reagowania
• reaguj natywne ekrany
• łączenie expo
• pasek-statusu-expo
• Reaguj natywną obsługą gestów

Jeśli ich brakuje, możesz je zainstalować, uruchamiając:

instalacja npx expo 

Krok 2: Zaktualizuj punkt wejścia

Stwórz nowy indeks.js plik, aby zastąpić istniejący Aplikacja.js punkt wejścia i ustaw indeks.js jako punkt wejścia aplikacji w środku aplikacja.json:

// Ustaw index.js jako punkt wejścia
{
"główny": „index.js”
}
// Zaimportuj następujący wewnętrzny plik index.js
import„expo-router/wpis”;

Expo Router używa głęboki link schemat, aby określić, który ekran lub zawartość mają być otwierane podczas kierowania.

Zdefiniuj schemat precyzyjnych linków dla swojej aplikacji, dodając plik schemat nieruchomość do aplikacja.json:

{
„wystawa”: {
"schemat": „moja aplikacja”
 }
}

Krok 4: Ostateczna konfiguracja

Ostatnim krokiem jest skonfigurowanie pakietu Metro aplikacji Expo i skonfigurowanie Babel do obsługi Expo Router w Twojej aplikacji.

Wewnątrz babel.config.js zmodyfikuj istniejący kod, aby wyglądał tak:

moduł.eksport = funkcjonować (interfejs API) {
 api.cache(PRAWDA);
powrót {
 presety: ["babel-preset-expo"],
 wtyczki: [
wymagać.rozstrzygać(„expo-router/babel”),
/* */
 ],
 };
};

Teraz przebuduj i uruchom aplikację, uruchamiając:

npx expo -- wyczyść

Budowanie tras Twojej aplikacji za pomocą Expo Router

Możesz rozpocząć konfigurowanie przepływu nawigacji w ramach aplikacja teczka. The indeks.js plik jest twoim punktem wyjścia. Expo Router dodaje ścieżkę do każdego pliku, który tworzysz w środku aplikacja do systemu tras aplikacji z precyzyjnymi linkami URL pasującymi do każdej strony.

Na przykład utwórz SecondScreen.js plik wewnątrz aplikacja katalog i wyeksportuj domyślny komponent:

import { Arkusz stylów, tekst, widok } z„reaguj natywnie”;
import Reagować z"reagować";
konst Drugi ekran = () => {
powrót (


Drugi ekran</Text>
 </View>
 </View>
 );
};
eksportdomyślny drugi ekran;
konst style = StyleSheet.create({});

Możesz przejść do tego ekranu z indeks.js z użyjRouter() metoda:

import { useRouter } z„expo-router”;
eksportdomyślnyfunkcjonowaćStrona() {
konst nawigacja = useRouter();
powrót (

Witaj świecie</Text>
To jest pierwsza strona z Twoja aplikacja.</Text>
 tytuł=„Przejdź do drugiego ekranu”
 onPress={() => {
 nawigacja.push("/drugi ekran");
 }}
 />
 </View>
 );
}

Tutaj przypisujesz router do nawigacji i używasz go wewnątrz elementu Button, wywołując navigation.push("/sekunda"). Argumentem w push jest ścieżka do pliku ekranu, do którego chcesz przejść.

Wewnątrz Drugi ekran możesz także przejść do ekranu indeksu w następujący sposób:

import { Link } z„expo-router”;
konst Drugi ekran = () => {
powrót (


Drugi ekran</Text>
"/" jakoDziecko>

Przejdź do pliku index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Element link pobiera właściwość href, aby określić ścieżkę. Wewnątrz aplikacji, "/" ścieżka odpowiada plikowi wejściowemu (index.js). Drugim rekwizytem jest asChild. Ta właściwość umożliwia renderowanie pierwszego komponentu potomnego ze wszystkimi określonymi właściwościami zamiast domyślnego komponentu Link. Możesz użyć tego, aby dostosować wygląd komponentu Link lub zaimplementować niestandardową logikę routingu.

Definiowanie tras dynamicznych

Trasy dynamiczne umożliwiają dynamiczne generowanie tras na podstawie określonych parametrów lub danych. Zamiast definiować stały zestaw tras, zyskujesz elastyczność i możliwość dostosowania nawigacji w aplikacji.

Aby rozpocząć korzystanie z tras dynamicznych w Expo Router, musisz zdefiniować trasy do obsługi zawartości dynamicznej. Możesz użyć tras sparametryzowanych, określając symbole zastępcze w ścieżce trasy. Wartości dla tych symboli zastępczych będą wtedy dostępne dla Twojej trasy, gdy ktoś do niej nawiguje.

Rozważmy na przykład aplikację do blogowania, w której chcesz wyświetlać pojedyncze posty na blogu. Możesz zdefiniować dynamiczną trasę do obsługi każdego z wpisów na blogu:

// app/routes/BlogPost.js
import Reagować z"reagować";
import { useRouter } z„expo-router”;
konst wpis na blogu = ({ trasa }) => {
konst { identyfikator_poczty} = trasa.parametry;
powrót (

Wyświetlanie wpisu na blogu z Identyfikator: {postId}</Text>
 </View>
 );
};
eksportdomyślny Post na blogu;

W tym przykładzie zdefiniujesz dynamiczny komponent trasy o nazwie Post na blogu. The parametry.trasy obiekt umożliwia dostęp do wartości parametrów przekazywanych do trasy. W tym przypadku uzyskujesz dostęp do identyfikator pocztowy parametr, aby wyświetlić odpowiedni wpis na blogu.

Generowanie tras dynamicznych

Teraz, gdy masz zdefiniowaną trasę dynamiczną, możesz generować trasy dynamicznie na podstawie danych lub danych wprowadzonych przez użytkownika. Na przykład, jeśli masz listę postów na blogu pobranych z interfejsu API, możesz dynamicznie generować trasy dla każdego posta na blogu.

Oto przykład:

// app/components/BlogList.js
import Reagować z"reagować";
import { useNavigation } z„expo-router”;
konst Lista blogów = ({ Posty na blogu }) => {
konst nawigacja = użyjNawigacja();
konst nawigujdo wpisu na blogu = (identyfikator pocztowy) => {
 nawigacja. nawigacja ("Post na blogu", {Identyfikator_poczty});
 };
powrót (

 {blogposty.map((post) => (
 klucz={post.id}
 onPress={() => nawigujToBlogPost (post.id)}
 >
{post.tytuł}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportdomyślny Lista blogów;

W tym przykładzie iterujesz po Posty na blogu array i renderuj a komponent dla każdego posta. Po naciśnięciu posta, przejdź do wpisu na blogu funkcja działa, przekazując identyfikator pocztowy do trasy nawigacji.

Obsługa tras dynamicznych

Możesz słuchać zdarzeń nawigacyjnych specyficznych dla trasy dynamicznej za pomocą użyjFocusEffect hak.

Na przykład:

// app/routes/BlogPost.js
import Reagować z"reagować";
import { Trasa, użyjFocusEffect} z„expo-router”;
konst wpis na blogu = ({ trasa }) => {
konst { identyfikator_poczty} = trasa.parametry;
 użyjFocusEffect(() => {
// Pobierz dane wpisu na blogu na podstawie identyfikatora postId
// Wykonaj wszelkie inne niezbędne czynności na fokusie
 });
powrót (

Wyświetlanie wpisu na blogu z Identyfikator: {postId}</Text>
 </View>
 );
};
eksportdomyślny Post na blogu;

W tym przykładzie użyjFocusEffect hook nasłuchuje zdarzeń fokusowych specyficznych dla Post na blogu część. Wewnątrz wywołania zwrotnego możesz pobrać dodatkowe dane, wykonać działania lub zaktualizować ekran na podstawie skoncentrowanego posta na blogu.

Nawigacja z dynamicznymi trasami

Aby nawigować do trasy dynamicznej, możesz skorzystać z metod nawigacji dostarczonych przez Expo Router.

Na przykład, aby przejść do Post na blogu składnik z określonym identyfikator pocztowy, możesz skorzystać z tzw nawigacja. nawigacja metoda:

// app/components/BlogList.js
import Reagować z"reagować";
import { useNavigation } z„expo-router”;
konst Lista blogów = ({ Posty na blogu }) => {
konst nawigacja = użyjNawigacja();
konst nawigujdo wpisu na blogu = (identyfikator pocztowy) => {
 nawigacja. nawigacja ("Post na blogu", {Identyfikator_poczty});
 };
powrót (

 {blogposty.map((post) => (
 klucz={post.id}
 onPress={() => nawigujToBlogPost (post.id)}
 >
{post.tytuł}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportdomyślny Lista blogów;

Po naciśnięciu posta na blogu, przejdź do wpisu na blogu funkcja uruchomi się z identyfikator pocztowy.

Expo Router pomaga uporządkować aplikacje natywne

Expo Router zapewnia doskonałe rozwiązanie do zarządzania nawigacją w aplikacjach React Native. Poprzez ponowne wyobrażenie sobie natywnego routingu, Expo Router oferuje elastyczność i łatwość użytkowania.

Poznałeś funkcje Expo Router, zagłębiłeś się w podstawowe koncepcje routingu i odkryłeś, jak budować trasy dynamiczne. Dzięki Expo Router możesz tworzyć dynamiczne przepływy nawigacji, obsługiwać różne dane lub dane wprowadzane przez użytkowników oraz personalizować nawigację w swojej aplikacji.