Le routage basé sur les fichiers est une technique de développement web courante qui associe un chemin d’URL à un fichier spécifique dans un répertoire de projet. Ce système permet d’éviter les configurations de routage complexes qu’implique la construction de systèmes de navigation.
Avec la sortie de la bibliothèque Expo Router, le routage basé sur les fichiers est possible avec les applications React Native. Expo Router pourrait être un meilleur système de navigation pour les développeurs React Native travaillant avec Expo.
La navigation réimaginée avec Expo Router
Le routeur expo fournit une solution de routage déclarative pour les applications React Native Expo. Ce système est considérablement différent de la façon dont vous construiriez un système de navigation à l’aide de React Navigation. Expo Router résout les principaux problèmes liés à l’utilisation du système de navigation actuel.
Il s’agit notamment d’un système de navigation qui ne fonctionne pas partout de manière cohérente, de difficultés dans la gestion des liens profonds et de configurations complexes pour les transitions de navigation personnalisées.
Le système de navigation/routage basé sur le fichier expo router est un système simple qui fonctionne bien et qui est déjà connu des développeurs JavaScript et des frameworks JavaScript comme Next.js, où il est possible de définir des itinéraires.
Installation et configuration d’Expo Router
Il est assez simple de migrer votre projet Expo de l’ancien système de navigation à l’utilisation d’Expo Router.
Etape 1 : Installer le routeur Expo
Utilisez cette commande de terminal pour exécuter le programme d’installation de l’expo-routeur :
npx expo install expo-router
Vous devrez également vous assurer d’avoir installé les dépendances suivantes :
- react-native-safe-area-context
- react-native-screens
- expo-linking
- expo-status-bar
- react-native-gesture-handler
Si l’un d’entre eux est manquant, vous pouvez l’installer en exécutant :
npx expo install <dependency-name>
Étape 2 : Mise à jour du point d’entrée
Créer un nouveau index.js pour remplacer votre fichier App.js et définir le point d’entrée index.js comme point d’entrée de l’application à l’intérieur de app.json:
// Set index.js as entry point
{
"main": "index.js"
}
// Import the following inside index.js
import "expo-router/entry";
Étape 3 : Définir un schéma de liens profonds
Expo Router utilise un schéma de liens profonds pour déterminer quel écran ou contenu ouvrir lors du routage.
Définissez un schéma de liens profonds pour votre application en ajoutant une balise schéma propriété à app.json:
{
"expo": {
"scheme": "myapp"
}
}
Étape 4 : Configuration finale
La dernière étape consiste à configurer le bundler métro de votre application Expo et à configurer Babel pour qu’il supporte Expo Router dans votre application.
A l’intérieur babel.config.js modifier le code existant pour qu’il ressemble à ceci :
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
require.resolve("expo-router/babel"),
/* */
],
};
};
Reconstruisez maintenant votre application et démarrez-la en la lançant :
npx expo --clear
2 Images
Construire les routes de votre application avec Expo Router
Vous pouvez commencer à mettre en place un flux de navigation dans l’application app dossier. Le dossier index.js est votre point de départ. Expo Router ajoute le chemin de chaque fichier que vous créez à l’intérieur de app vers le système d’itinéraires de l’application avec des liens profonds URL correspondant à chaque page.
Par exemple, créer un SecondScreen.js à l’intérieur du fichier app et exporter un composant par défaut :
import { StyleSheet, Text, View } from "react-native";
import React from "react";
const SecondScreen = () => {
return (
<View style={styles.container}>
<View style={styles.textStyle}>
<Text>Second Screen</Text>
</View>
</View>
);
};
export default SecondScreen;
const styles = StyleSheet.create({});
Vous pouvez accéder à cet écran à partir de index.js avec l’option useRouter() méthode :
import { useRouter } from "expo-router";
export default function Page() {
const navigation = useRouter();
return (
<View style={styles.container}>
<Text style={styles.title}>Hello World</Text>
<Text style={styles.subtitle}>This is the first page of your app.</Text>
<Button
title="Navigate to SecondScreen"
onPress={() => {
navigation.push("/SecondScreen");
}}
/>
</View>
);
}
Ici, vous affectez le routeur à la navigation et l’utilisez à l’intérieur de l’élément Button en appelant navigation.push(« /second »). L’argument dans push est le chemin d’accès au fichier de l’écran vers lequel vous souhaitez naviguer.
A l’intérieur Deuxième écran vous pouvez aussi naviguer vers l’écran d’index comme ceci :
import { Link } from "expo-router";
const SecondScreen = () => {
return (
<View style={styles.container}>
<View style={styles.textStyle}>
<Text>Second Screen</Text>
<Link href="https://www.makeuseof.com/" asChild>
<TouchableOpacity>
<Text>Navigate to index.js</Text>
</TouchableOpacity>
</Link>
</View>
</View>
);
};
L’élément link prend une propriété href pour spécifier le chemin. Dans l’application, l’élément « / » Le chemin correspond au fichier d’entrée (index.js). La deuxième propriété est asChild. Cette propriété vous permet de rendre un composant premier enfant avec tous les accessoires spécifiés à la place du composant Link par défaut. Vous pouvez l’utiliser pour personnaliser l’apparence du composant Link ou pour mettre en œuvre une logique de routage personnalisée.
Définition des routes dynamiques
Les itinéraires dynamiques permettent de générer des itinéraires de manière dynamique en fonction de certains paramètres ou données. Au lieu de définir un ensemble fixe d’itinéraires, vous gagnez en flexibilité et en adaptabilité dans la navigation de votre application.
Pour commencer à utiliser les routes dynamiques dans Expo Router, vous devez définir les routes pour gérer le contenu dynamique. Vous pouvez utiliser des routes paramétrées en spécifiant des espaces réservés dans le chemin de la route. Les valeurs de ces espaces réservés seront alors disponibles pour votre route lorsque quelqu’un naviguera vers elle.
Prenons l’exemple d’une application de blogging dans laquelle vous souhaitez afficher des articles de blog individuels. Vous pouvez définir une route dynamique pour gérer chacun des articles de blog :
// app/routes/BlogPost.js
import React from "react";
import { useRouter } from "expo-router";
const BlogPost = ({ route }) => {
const { postId } = route.params;
return (
<View>
<Text>Displaying Blog Post with ID: {postId}</Text>
</View>
);
};
export default BlogPost;
Dans cet exemple, vous définissez un composant de route dynamique nommé BlogPost. Les route.params vous permet d’accéder aux valeurs des paramètres transmis à la route. Dans ce cas, vous accédez à un objet postId pour afficher l’article de blog correspondant.
Générer des routes dynamiques
Maintenant que vous avez défini une route dynamique, vous pouvez générer des routes de manière dynamique en fonction des données ou de l’entrée de l’utilisateur. Par exemple, si vous disposez d’une liste d’articles de blogs récupérés à partir d’une API, vous pouvez générer dynamiquement des itinéraires pour chaque article de blog.
Voici un exemple :
// app/components/BlogList.js
import React from "react";
import { useNavigation } from "expo-router";
const BlogList = ({ blogPosts }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
navigation.navigate("BlogPost", { postId });
};
return (
<View>
{blogPosts.map((post) => (
<TouchableOpacity
key={post.id}
onPress={() => navigateToBlogPost(post.id)}
>
<Text>{post.title}</Text>
</TouchableOpacity>
))}
</View>
);
};
export default BlogList;
Dans cet exemple, vous itérez sur le fichier blogPosts et rendre un tableau <TouchableOpacity> ; pour chaque poste. Lorsque vous appuyez sur un poste, le composant navigateToBlogPost s’exécute, en passant la fonction postId à l’itinéraire de navigation.
Gestion des itinéraires dynamiques
Vous pouvez écouter les événements de navigation spécifiques à une route dynamique à l’aide de la fonction useFocusEffect hook.
Par exemple :
// app/routes/BlogPost.js
import React from "react";
import { Route, useFocusEffect } from "expo-router";
const BlogPost = ({ route }) => {
const { postId } = route.params;
useFocusEffect(() => {
// Fetch blog post data based on postId
// Perform any other necessary actions on focus
});
return (
<View>
<Text>Displaying Blog Post with ID: {postId}</Text>
</View>
);
};
export default BlogPost;
Dans cet exemple, le useFocusEffect écoute les événements de mise au point spécifiques à l’effet BlogPost . Dans le callback, vous pouvez récupérer des données supplémentaires, effectuer des actions ou mettre à jour l’écran en fonction de l’article de blog ciblé.
Naviguer avec des routes dynamiques
Pour naviguer vers une route dynamique, vous pouvez utiliser les méthodes de navigation fournies par Expo Router.
Par exemple, pour naviguer vers la route BlogPost avec un composant spécifique postId, vous pouvez utiliser la fonction navigation.navigate méthode :
// app/components/BlogList.js
import React from "react";
import { useNavigation } from "expo-router";
const BlogList = ({ blogPosts }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
navigation.navigate("BlogPost", { postId });
};
return (
<View>
{blogPosts.map((post) => (
<TouchableOpacity
key={post.id}
onPress={() => navigateToBlogPost(post.id)}
>
<Text>{post.title}</Text>
</TouchableOpacity>
))}
</View>
);
};
export default BlogList;
Lorsque vous appuyez sur un article de blog, le navigateToBlogPost se déclenchera avec la fonction postId.
Expo Router vous aide à structurer vos applications natives
Expo Router constitue une excellente solution pour gérer la navigation dans vos applications React Native. En réimaginant l’expérience du routage natif, Expo Router offre flexibilité et facilité d’utilisation.
Vous avez exploré les fonctionnalités d’Expo Router, approfondi les concepts de routage de base et découvert comment construire des itinéraires dynamiques. Avec Expo Router, vous pouvez créer des flux de navigation dynamiques, gérer des données variables ou des entrées utilisateur, et personnaliser la navigation dans votre application.
