Nativní směrování přepracované pomocí směrovače Expo

Směrování založené na souborech je běžná technika vývoje webu, která mapuje cestu URL ke konkrétnímu souboru v adresáři projektu. Tento systém se vyhýbá složitým konfiguracím směrování souvisejícím s navigačními systémy budovy.

S vydáním knihovny Expo Router je s aplikacemi React Native možné směrování založené na souborech. Expo Router by mohl být lepší navigační systém pro vývojáře React Native pracující s Expo.

Navigace přepracována s Expo Routerem

Směrovač expo poskytuje deklarativní řešení směrování pro aplikace React Native Expo. Tento systém se výrazně liší od toho, jak byste to udělali vy vytvořit navigační systém pomocí React Navigation. Expo Router odbourává velké obavy z používání současného funkčního navigačního systému.

Tyto problémy zahrnují navigační systém, který nefunguje všude konzistentně, potíže se správou přímých odkazů a také složitá nastavení pro přechody vlastní navigace.

Souborová navigace/směrování expo routeru je jednoduchý systém, který funguje dobře a je již známý mezi vývojáři JavaScriptu a frameworky JavaScript, jako jsou

Next.js, kde můžete definovat trasy.

Instalace a nastavení Expo Router

Migrace projektu Expo ze starého navigačního systému na router Expo je poměrně jednoduchá.

Krok 1: Nainstalujte Expo Router

Tento příkaz terminálu použijte ke spuštění instalačního programu expo-router:

npx expo install expo-router

Budete se také muset ujistit, že jste nainstalovali tyto závislosti:

• reagovat-nativní-safe-area-context
• reaktivní-nativní obrazovky
• expo-linking
• výstavní-stavový-bar
• reagovat-nativní-gesto-handler

Pokud nějaké chybí, můžete je nainstalovat spuštěním:

instalace npx expo 

Krok 2: Aktualizujte vstupní bod

Vytvoř nový index.js soubor, který nahradí váš stávající App.js vstupní bod a nastavte index.js jako vstupní bod aplikace uvnitř app.json:

// Nastaví index.js jako vstupní bod
{
"hlavní": "index.js"
}
// Importujte následující soubor uvnitř index.js
import"expo-router/vstup";

Expo Router používá a přímý odkaz schéma pro určení, která obrazovka nebo obsah se má při směrování otevřít.

Definujte schéma přímých odkazů pro svou aplikaci přidáním a systém majetek do app.json:

{
"expo": {
"systém": "moje aplikace"
 }
}

Krok 4: Konečná konfigurace

Posledním krokem je nastavení balíku metra vaší aplikace Expo a konfigurace Babel tak, aby ve vaší aplikaci podporoval Expo Router.

Uvnitř babel.config.js upravit stávající kód tak, aby vypadal takto:

modul.export = funkce (api) {
 api.cache(skutečný);
vrátit se {
 předvolby: ["babel-preset-expo"],
 pluginy: [
vyžadovat.odhodlání("expo-router/babel"),
/* */
 ],
 };
};

Nyní znovu sestavte a spusťte aplikaci spuštěním:

npx expo --clear

Vytváření tras vaší aplikace pomocí směrovače Expo

Můžete začít nastavovat navigační tok v rámci aplikace složku. The index.js soubor je vaším výchozím bodem. Expo Router přidá cestu ke každému souboru, který vytvoříte dovnitř aplikace do systému směrování aplikace s přímými odkazy na adresy URL, které odpovídají každé stránce.

Vytvořte například a SecondScreen.js soubor uvnitř aplikace adresář a exportujte výchozí komponentu:

import { StyleSheet, Text, View } z"reakční";
import Reagovat z"reagovat";
konst Druhá obrazovka = () => {
vrátit se (


Druhá obrazovka</Text>
 </View>
 </View>
 );
};
vývoznívýchozí Druhá obrazovka;
konst styly = StyleSheet.create({});

Na tuto obrazovku můžete přejít z index.js s useRouter() metoda:

import { useRouter } z"expo-router";
vývoznívýchozífunkceStrana() {
konst navigace = useRouter();
vrátit se (

Ahoj světe</Text>
Toto je první stránka z vaše aplikace.</Text>
 titul="Navigovat na druhou obrazovku"
 onPress={() => {
 navigace.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Zde přiřadíte router k navigaci a použijete jej uvnitř prvku Button voláním navigace.push("/sekunda"). Argumentem push je cesta k souboru obrazovky, na kterou chcete přejít.

Uvnitř Druhá obrazovka můžete také přejít na obrazovku indexu takto:

import { Odkaz } z"expo-router";
konst Druhá obrazovka = () => {
vrátit se (


Druhá obrazovka</Text>
"/" jako Dítě>

Přejděte na index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Prvek odkazu používá prop href k určení cesty. Uvnitř aplikace, "/" cesta odpovídá vstupnímu souboru (index.js). Druhá rekvizita je asChild. Tato podpěra vám umožňuje vykreslit první podřízenou komponentu se všemi zadanými podpěrami namísto výchozí komponenty Link. Můžete to použít k přizpůsobení vzhledu komponenty Link nebo k implementaci vlastní logiky směrování.

Definování dynamických tras

Pomocí dynamických tras můžete generovat trasy dynamicky na základě určitých parametrů nebo dat. Namísto definování pevné sady tras získáte flexibilitu a přizpůsobivost v navigaci vaší aplikace.

Chcete-li začít používat dynamické trasy v Expo Router, musíte definovat trasy pro zpracování dynamického obsahu. Parametrizované trasy můžete použít zadáním zástupných symbolů v cestě trasy. Hodnoty pro tyto zástupné symboly pak budou k dispozici pro vaši trasu, když k ní někdo naviguje.

Zvažte například aplikaci pro blogování, kde chcete zobrazovat jednotlivé blogové příspěvky. Můžete definovat dynamickou cestu pro zpracování každého z blogových příspěvků:

// app/routes/BlogPost.js
import Reagovat z"reagovat";
import { useRouter } z"expo-router";
konst Příspěvek na blogu = ({ trasa }) => {
konst { postId } = route.params;
vrátit se (

Zobrazuji příspěvek na blogu s ID: {postId}</Text>
 </View>
 );
};
vývoznívýchozí BlogPost;

V tomto příkladu definujete komponentu dynamické trasy s názvem BlogPost. The trasa.param objekt umožňuje přístup k hodnotám parametrů předávaným do trasy. V tomto případě přistupujete k a postId parametr pro zobrazení odpovídajícího příspěvku na blogu.

Generování dynamických tras

Nyní, když máte definovanou dynamickou trasu, můžete generovat trasy dynamicky na základě dat nebo vstupu uživatele. Pokud máte například seznam blogových příspěvků načtených z API, můžete dynamicky generovat trasy pro každý blogový příspěvek.

Zde je příklad:

// app/components/BlogList.js
import Reagovat z"reagovat";
import { useNavigation } z"expo-router";
konst BlogList = ({ blogposts }) => {
konst navigace = useNavigation();
konst navigateToBlogPost = (postId) => {
 navigace.navigovat("BlogPost", { postId });
 };
vrátit se (

 {blogPosts.map((pošta) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
vývoznívýchozí BlogList;

V tomto příkladu iterujete přes blogposts pole a vykreslení a komponent pro každý příspěvek. Když stisknete příspěvek, navigateToBlogPost funkce se spustí a předá postId k navigační trase.

Zpracování dynamických tras

Můžete poslouchat navigační události specifické pro dynamickou trasu pomocí useFocusEffect háček.

Například:

// app/routes/BlogPost.js
import Reagovat z"reagovat";
import { Route, useFocusEffect } z"expo-router";
konst Příspěvek na blogu = ({ trasa }) => {
konst { postId } = route.params;
 useFocusEffect(() => {
// Načte data blogového příspěvku na základě postId
// Proveďte jakékoli další nezbytné akce při zaměření
 });
vrátit se (

Zobrazuji příspěvek na blogu s ID: {postId}</Text>
 </View>
 );
};
vývoznívýchozí BlogPost;

V tomto příkladu je useFocusEffect hook naslouchá událostem zaměření specifickým pro BlogPost komponent. Uvnitř zpětného volání můžete načíst další data, provádět akce nebo aktualizovat obrazovku na základě zaměřeného blogového příspěvku.

Navigace s dynamickými trasami

K navigaci na dynamickou trasu můžete použít metody navigace poskytované Expo Routerem.

Chcete-li například přejít do BlogPost komponenta se specifickou postId, můžete použít navigace.navigovat metoda:

// app/components/BlogList.js
import Reagovat z"reagovat";
import { useNavigation } z"expo-router";
konst BlogList = ({ blogposts }) => {
konst navigace = useNavigation();
konst navigateToBlogPost = (postId) => {
 navigace.navigovat("BlogPost", { postId });
 };
vrátit se (

 {blogPosts.map((pošta) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
vývoznívýchozí BlogList;

Když stisknete příspěvek na blogu, navigateToBlogPost funkce se spustí s postId.

Expo Router vám pomůže strukturovat vaše nativní aplikace

Expo Router poskytuje vynikající řešení pro správu navigace ve vašich aplikacích React Native. Díky nové představě nativního směrování nabízí Expo Router flexibilitu a snadné použití.

Prozkoumali jste funkce Expo Routeru, ponořili se do základních konceptů směrování a zjistili, jak vytvářet dynamické trasy. S Expo Router můžete vytvářet dynamické navigační toky, zpracovávat různá data nebo uživatelské vstupy a přizpůsobovat navigaci ve své aplikaci.