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 (mon amas 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.Navigator ;
  • 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,
                    });
    •  
  • 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 :

Cliquez sur le bouton pour copier le code 
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>
                )
            }
  •