Réact Native : navigation
Installation des bibliothèques :
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
Structure du projet :
Dans le sous-dossier "pages" du projet, placer les fichiers :
qui correspondent chacun à un écran du projet.
Les composants de navigation :
Dans le fichier principal de mon application, App.js, j'importe les bibliothèques fournissant les composants de navigation :
"NavigationContainer" qui gère la liste (et l'état) des nos écrans ;
"createNativeStackNavigator" pour la création de liens vers nos futures pages.
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
J'importe également les composants qui définissent mes écrans. Il s'agit des fonctions "Crud" et "UpdateCrud" décrites respectivement dans les fichiers "./Pages/Crud.js" et " ./Pages/UpdateCrud.js" :
import Crud from './Pages/Crud';
import UpdateCrud from './Pages/UpdateCrud';
Analyse du code :
Par l'appel à la fonction createNativeStackNavigator(), je crée l'objet "stack" qui correspond à l'ensemble de mes écrans (ma pile d'écrans).
const Stack = createNativeStackNavigator();
Cet objet dispose des méthodes Navigator et Screen. Pour le rendu, il faut utiliser le composant global "NavigationContainer" qui doit contenir :
l'état initial de la navigation : Stack.Navigato ;
une déclaration Stack.Screen pour chacun des écrans.
Navigator :
Cette méthode décrit l'état initial par ses propriétés :
initialRouteName : l'écran d'accueil ;
screenOptions : les caractéristiques qui s'appliqueront à tous les écrans.
Screen :
Cette méthode déclare un écran par ses propriétés, (voir la documentation officielle) :
- name (obligatoire) ;
- component (obligatoire) le nom "système ou objet " de l'écran (voir plus de détail dans le § création d'un écran, ci-dessous) ;
- options : à utiliser pour transmettre les propriétés navigation et route (associées automatiquement à chaque écran) comme dans l'exemple suivant :
options={({ navigation, route }) => ({
title: 'Update CRUD',
headerLeft: () => (
<Button
onPress={() => navigation.navigate('Crud')}
title="Retour"
color="#f00"
/>
),
})}
La propriété "navigation" dispose de nombreuses méthodes comme :
- navigate :
- passer à un autre écran par navigate(name) :
- ex : navigate("Crud")
- passer à un autre écran et lui passer des paramètres navigate(name,params) :
- navigation.navigate('UpdateCrud',{
num: arg1,
name: arg2,
course: arg3,
});
- navigation.navigate('UpdateCrud',{
- passer à un autre écran par navigate(name) :
- voir la documentation complète
De même la propriété "route" dispose de nombreuses méthodes (voir la documentation officielle).
Récupération des paramètres dans l'écran appelé :
Ces paramètres seront récupérés dans la fonction appelée (dans l'exemple : "UpdateCrud") par la méthode "params" de l'objet "route".
const UpdateCrud =( {navigation, route} ) =>{
const { num, name, course } = route.params;
Création d'un écran :
Le code ci-dessous montre la désignation du composant "Crud" comme élément réalisant toutes les fonctionnalités de l'écran. Ce composant correspond à la fonction "Crud" qui est ici importée (cf § précédent : les composants de la navigation) et dont le code est détaillé ICI.
<Stack.Screen
name="Crud"
component={Crud}
options={({ navigation, route }) => ({
title: 'Tester CRUD',
})}
/>
.....
Le code complet :
dans le presse papier
import React, { useState } from "react";
import { Button } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Crud from './Pages/Crud';
import UpdateCrud from './Pages/UpdateCrud';
const main = () => {
const Stack = createNativeStackNavigator();
return(
<NavigationContainer>
<Stack.Navigator
initialRouteName="Crud"
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleAlign:'center',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name="Crud"
component={Crud}
options={({ navigation, route }) => ({
title: 'Tester CRUD',
})}
/>
<Stack.Screen
name="UpdateCrud"
component={UpdateCrud}
options={({ navigation, route }) => ({
title: 'Update CRUD',
headerLeft: () => (
<Button
onPress={() => navigation.navigate('Crud')}
title="Retour"
color="#f00"
/>
),
})}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
