Natives Routing neu gedacht mit Expo Router

Dateibasiertes Routing ist eine gängige Webentwicklungstechnik, die einen URL-Pfad einer bestimmten Datei in einem Projektverzeichnis zuordnet. Dieses System vermeidet die komplexen Routing-Konfigurationen, die beim Aufbau von Navigationssystemen erforderlich sind.

Mit der Veröffentlichung der Expo Router-Bibliothek ist dateibasiertes Routing mit React Native-Anwendungen möglich. Expo Router könnte ein besseres Navigationssystem für React Native-Entwickler sein, die mit Expo arbeiten.

Navigation neu gedacht mit Expo Router

Der Expo-Router bietet eine deklarative Routing-Lösung für React Native Expo-Apps. Dieses System unterscheidet sich erheblich von dem, was Sie tun würden Erstellen Sie ein Navigationssystem mit React Navigation. Expo Router wirft große Bedenken hinsichtlich der Verwendung des aktuell funktionierenden Navigationssystems auf.

Zu diesen Problemen gehören ein Navigationssystem, das nicht überall konsistent funktioniert, Schwierigkeiten bei der Verwaltung von Deep-Links und auch komplexe Setups für benutzerdefinierte Navigationsübergänge.

Die dateibasierte Navigation/Routing-Funktion des Expo-Routers ist ein einfaches System, das gut funktioniert und unter JavaScript-Entwicklern und JavaScript-Frameworks bereits bekannt ist Next.js, wo Sie Routen definieren können.

Expo-Router installieren und einrichten

Es ist ziemlich einfach, Ihr Expo-Projekt vom alten Navigationssystem auf die Verwendung des Expo-Routers zu migrieren.

Schritt 1: Installieren Sie den Expo-Router

Verwenden Sie diesen Terminalbefehl, um das expo-router-Installationsprogramm auszuführen:

npx expo expo-router installieren

Sie müssen außerdem sicherstellen, dass Sie diese Peer-Abhängigkeiten installiert haben:

• React-Native-Safe-Area-Kontext
• React-Native-Screens
• Expo-Verlinkung
• Expo-Statusleiste
• React-Native-Gesture-Handler

Wenn welche fehlen, können Sie sie installieren, indem Sie Folgendes ausführen:

Npx Expo-Installation 

Schritt 2: Aktualisieren Sie den Einstiegspunkt

Erstelle eine neue index.js Datei, um Ihre vorhandene zu ersetzen App.js Einstiegspunkt und legen Sie fest index.js als Einstiegspunkt der App im Inneren app.json:

// Index.js als Einstiegspunkt festlegen
{
"hauptsächlich": „index.js“
}
// Folgendes in index.js importieren
importieren„expo-router/entry“;

Expo Router verwendet a Deep-Link Schema, um zu bestimmen, welcher Bildschirm oder Inhalt beim Routing geöffnet werden soll.

Definieren Sie ein Deep-Linking-Schema für Ihre App, indem Sie ein hinzufügen planen Eigentum zu app.json:

{
"Messe": {
"planen": "meine App"
 }
}

Schritt 4: Endgültige Konfiguration

Der letzte Schritt besteht darin, den Metro-Bundler Ihrer Expo-App einzurichten und Babel für die Unterstützung von Expo Router in Ihrer App zu konfigurieren.

Innen babel.config.js Ändern Sie den vorhandenen Code so, dass er wie folgt aussieht:

Modul.exports = Funktion (API) {
 api.cache(WAHR);
zurückkehren {
 Voreinstellungen: [„babel-preset-expo“],
 Plugins: [
erfordern.beschließen(„expo-router/babel“),
/* */
 ],
 };
};

Erstellen Sie nun Ihre App neu und starten Sie sie, indem Sie Folgendes ausführen:

npx expo --clear

Erstellen Sie die Routen Ihrer App mit Expo Router

Sie können damit beginnen, einen Navigationsfluss innerhalb des einzurichten App Ordner. Der index.js Die Datei ist Ihr Ausgangspunkt. Expo Router fügt den Pfad jeder darin erstellten Datei hinzu App zum Routensystem der App mit URL-Deep-Links, die zu jeder Seite passen.

Erstellen Sie beispielsweise eine SecondScreen.js Datei innerhalb der App Verzeichnis und exportieren Sie eine Standardkomponente:

importieren { StyleSheet, Text, Ansicht } aus„react-native“;
importieren Reagieren aus"reagieren";
const SecondScreen = () => {
zurückkehren (


Zweiter Bildschirm</Text>
 </View>
 </View>
 );
};
ExportStandard Zweiter Bildschirm;
const Styles = StyleSheet.create({});

Sie können von hier aus zu diesem Bildschirm navigieren index.js mit dem useRouter() Methode:

importieren { useRouter } aus„expo-router“;
ExportStandardFunktionBuchseite() {
const navigation = useRouter();
zurückkehren (

Hallo Welt</Text>
Dies ist die erste Seite von Ihre App.</Text>
 Titel=„Navigieren Sie zu SecondScreen“
 onPress={() => {
 navigation.push("/Zweiter Bildschirm");
 }}
 />
 </View>
 );
}

Hier weisen Sie dem Router die Navigation zu und nutzen ihn innerhalb des Button-Elements per Aufruf navigation.push("/second"). Das Argument in Push ist der Dateipfad des Bildschirms, zu dem Sie navigieren möchten.

Innen Zweiter Bildschirm Sie können auch folgendermaßen zum Indexbildschirm navigieren:

importieren { Verknüpfung } aus„expo-router“;
const SecondScreen = () => {
zurückkehren (


Zweiter Bildschirm</Text>
"/" alsKind>

Navigieren Sie zu index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Das Link-Element benötigt eine href-Requisite, um den Pfad anzugeben. Insider-App, die "/" Pfad entspricht der Eintragsdatei (index.js). Die zweite Requisite ist asChild. Mit dieser Requisite können Sie anstelle der Standard-Link-Komponente eine erste untergeordnete Komponente mit allen angegebenen Requisiten rendern. Sie können damit das Aussehen der Link-Komponente anpassen oder eine benutzerdefinierte Routing-Logik implementieren.

Dynamische Routen definieren

Mit dynamischen Routen können Sie Routen dynamisch basierend auf bestimmten Parametern oder Daten generieren. Anstatt einen festen Satz an Routen zu definieren, gewinnen Sie Flexibilität und Anpassungsfähigkeit bei der Navigation Ihrer App.

Um mit der Verwendung dynamischer Routen in Expo Router zu beginnen, müssen Sie die Routen für die Verarbeitung dynamischer Inhalte definieren. Sie können parametrisierte Routen verwenden, indem Sie Platzhalter im Pfad der Route angeben. Die Werte für diese Platzhalter stehen dann Ihrer Route zur Verfügung, wenn jemand dorthin navigiert.

Stellen Sie sich beispielsweise eine Blogging-App vor, in der Sie einzelne Blogbeiträge anzeigen möchten. Sie können eine dynamische Route definieren, um jeden Blog-Beitrag zu verarbeiten:

// app/routes/BlogPost.js
importieren Reagieren aus"reagieren";
importieren { useRouter } aus„expo-router“;
const BlogPost = ({ Route }) => {
const { postId } = route.params;
zurückkehren (

Blog-Beitrag anzeigen mit ID: {postId}</Text>
 </View>
 );
};
ExportStandard Blogeintrag;

In diesem Beispiel definieren Sie eine dynamische Routenkomponente mit dem Namen Blogeintrag. Der route.params Mit dem Objekt können Sie auf die an die Route übergebenen Parameterwerte zugreifen. In diesem Fall greifen Sie auf a zu Beitrags-ID Parameter, um den entsprechenden Blog-Beitrag anzuzeigen.

Dynamische Routen generieren

Nachdem Sie nun eine dynamische Route definiert haben, können Sie Routen dynamisch basierend auf Daten oder Benutzereingaben generieren. Wenn Sie beispielsweise über eine Liste von Blog-Beiträgen verfügen, die von einer API abgerufen werden, können Sie dynamisch Routen für jeden Blog-Beitrag generieren.

Hier ist ein Beispiel:

// app/components/BlogList.js
importieren Reagieren aus"reagieren";
importieren { useNavigation } aus„expo-router“;
const BlogList = ({ Blogeinträge }) => {
const navigation = useNavigation();
const navigierenToBlogPost = (Beitrags-ID) => {
 navigation.navigate("Blogeintrag", { postId });
 };
zurückkehren (

 {blogPosts.map((Post) => (
 key={post.id}
 onPress={() => navigationToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
ExportStandard BlogListe;

In diesem Beispiel iterieren Sie über Blogeinträge Array und rendern a Komponente für jeden Beitrag. Wenn Sie auf einen Beitrag klicken, wird der navigierenToBlogPost Die Funktion wird ausgeführt und übergibt die Beitrags-ID zur Navigationsroute.

Umgang mit dynamischen Routen

Mit dem können Sie Navigationsereignisse abhören, die für eine dynamische Route spezifisch sind useFocusEffect Haken.

Zum Beispiel:

// app/routes/BlogPost.js
importieren Reagieren aus"reagieren";
importieren { Route, useFocusEffect } aus„expo-router“;
const BlogPost = ({ Route }) => {
const { postId } = route.params;
 useFocusEffect(() => {
// Blogbeitragsdaten basierend auf postId abrufen
// Alle anderen erforderlichen Aktionen im Fokus ausführen
 });
zurückkehren (

Blog-Beitrag anzeigen mit ID: {postId}</Text>
 </View>
 );
};
ExportStandard Blogeintrag;

In diesem Beispiel ist die useFocusEffect Hook lauscht auf spezifische Fokusereignisse Blogeintrag Komponente. Innerhalb des Rückrufs können Sie zusätzliche Daten abrufen, Aktionen ausführen oder den Bildschirm basierend auf dem fokussierten Blog-Beitrag aktualisieren.

Navigieren mit dynamischen Routen

Um zu einer dynamischen Route zu navigieren, können Sie die von Expo Router bereitgestellten Navigationsmethoden verwenden.

Zum Beispiel, um zum zu navigieren Blogeintrag Komponente mit einem bestimmten Beitrags-ID, du kannst den... benutzen navigation.navigate Methode:

// app/components/BlogList.js
importieren Reagieren aus"reagieren";
importieren { useNavigation } aus„expo-router“;
const BlogList = ({ Blogeinträge }) => {
const navigation = useNavigation();
const navigierenToBlogPost = (Beitrags-ID) => {
 navigation.navigate("Blogeintrag", { postId });
 };
zurückkehren (

 {blogPosts.map((Post) => (
 key={post.id}
 onPress={() => navigationToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
ExportStandard BlogListe;

Wenn Sie auf einen Blog-Beitrag klicken, wird der navigierenToBlogPost Die Funktion wird mit dem ausgelöst Beitrags-ID.

Expo Router hilft Ihnen bei der Strukturierung Ihrer nativen Apps

Der Expo Router bietet eine hervorragende Lösung für die Navigationsverwaltung in Ihren React Native-Apps. Durch die Neugestaltung des nativen Routing-Erlebnisses bietet Expo Router Flexibilität und Benutzerfreundlichkeit.

Sie haben die Funktionen von Expo Router erkundet, sich mit grundlegenden Routing-Konzepten befasst und herausgefunden, wie man dynamische Routen erstellt. Mit Expo Router können Sie dynamische Navigationsflüsse erstellen, unterschiedliche Daten oder Benutzereingaben verarbeiten und die Navigation in Ihrer App personalisieren.