Comment utiliser le routage avec React Navigation dans React Native

Introduction

React Navigation est une bibliothèque populaire pour le routage et la navigation dans une application React Native.

Cette bibliothèque aide à résoudre le problème de la navigation entre plusieurs écrans et du partage des données entre eux.

À la fin de ce tutoriel, vous disposerez d’un réseau social rudimentaire. Il affichera le nombre de connexions dont dispose un utilisateur et fournira un moyen de se connecter avec des amis supplémentaires. Vous utiliserez cet exemple d’application pour découvrir comment naviguer dans les écrans d’applications mobiles en utilisant react-navigation.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Un environnement de développement local pour Node.js. Suivez Comment installer Node.js et créer un environnement de développement local.
• Il peut être utile de savoir comment configurer votre environnement pour créer un nouveau projet React Native et utiliser les simulateurs iOS ou Android.

Ce tutoriel a été vérifié avec Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3 et @react-navigation/stack v5.9.0.

Étape 1 - Création d’une nouvelle application React Native

Tout d’abord, créez une nouvelle application React Native en entrant la commande suivante dans votre terminal :

npx react-native init MySocialNetwork --version 0.63.2

Ensuite, naviguez vers le nouveau répertoire :

cd MySocialNetwork

Et lancez l’application pour iOS :

npm run ios

Ou alors, pour Android :

npm run android

Cela permettra de créer un projet squelette pour vous. Il ne ressemble pas beaucoup à un réseau social pour l’instant. Réglons ça.

Ouvrez App.js :

nano App.js

Remplacez le contenu d’App.js avec le code suivant pour afficher un message de bienvenue :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome to MySocialNetwork!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Sauvegardez le fichier. Maintenant, lorsque vous exécutez l’application, un Welcome to MySocialNetwork! MySocialNetwork! apparaîtra dans votre simulateur.

Dans l’étape suivante, vous ajouterez d’autres écrans à votre application.

Étape 2 - Création d’un HomeScreen et FriendsScreen

Actuellement, vous disposez d’un seul écran affichant un message de bienvenue. Au cours de cette étape, vous créerez les deux écrans de votre application : HomeScreen et FriendsScreen.

HomeScreen

Votre application aura besoin d’un HomeScreen. Le HomeScreen affichera le nombre d’amis déjà présents dans votre réseau.

Prenez le code d’App.js et ajoutez-le à un nouveau fichier appelé HomeScreen.js :

cp App.js HomeScreen.js

Ouvrez HomeScreen.js:

nano HomeScreen.js

Modifiez HomeScreen.js pour utiliser HomeScreen au lieu d’App :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have (undefined) friends.</Text>
      </View>
    );
  }
}

// ...

export default HomeScreen;

Ce code produira un message de remplacement You have (undefined) friends. Vous fournirez une valeur plus tard.

FriendsScreen

Votre application aura également besoin d’un FriendsScreen. Sur le FriendsScreen, vous pourrez ajouter de nouveaux amis.

Prenez le code de App.js et ajoutez-le à un nouveau fichier appelé FriendsScreen.js :

cp App.js FriendsScreen.js

Ouvrez FriendsScreen.js :

nano FriendsScreen.js

Modifiez FriendsScreen.js pour utiliser FriendsScreen au lieu d’App :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>
      </View>
    );
  }
}

// ...

export default FriendsScreen;

Ce code produira un Add friends here! here!

À ce stade, vous avez un HomeScreen et FriendsScreen. Cependant, il n’y a pas moyen de naviguer entre eux. Vous développerez cette fonctionnalité au cours de la prochaine étape.

Étape 3 - Utilisation des StackNavigator avec React Navigation

Pour naviguer entre les écrans, vous utiliserez un StackNavigator. Un StackNavigator fonctionne exactement comme une pile d’appels. Chaque écran vers lequel vous naviguez est poussé vers le haut de la pile. Chaque fois que vous appuyez sur le bouton Retour, les écrans se détachent du haut de la pile.

Tout d’abord, installez @react-navigation/native :

npm install @react-navigation/native@5.7.3

Ensuite, installez @react-navigation/stack et ses dépendances :

npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0

Ensuite, revisitez App.js :

nano App.js

Ajoutez NavigationContainer et createStackNavigator à App.js :

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

Ensuite, remplacez le contenu de render :

// ...

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

// ...

Nichée à l’intérieur <Stack.Navigator>, ajoutez le HomeScreen :

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

// ...

Ce code crée une très petite pile pour votre navigateur avec un seul écran : HomeScreen.

Nichée à l’intérieur <Stack.Navigator>, ajoutez le FriendsScreen :

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import FriendsScreen from './FriendsScreen';

const Stack = createStackNavigator();

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
          />
          <Stack.Screen
            name="Friends"
            component={FriendsScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

// ...

Ce code ajoute le FriendsScreen au navigateur.

Maintenant, le navigateur est conscient de vos deux écrans.

Ajouter des boutons à HomeScreen et FriendsScreen

Enfin, ajoutez des boutons pour vous déplacer entre vos deux écrans.

Dans HomeScreen.js, ajoutez le code suivant :

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have (undefined) friends.</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}

// ...

Dans FriendsScreen.js, ajoutez le code suivant :

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

// ...

Parlons de this.props.navigation. Tant que votre écran est inclus dans le StackNavigatorIl hérite automatiquement de nombreux accessoires utiles de la navigation objet. Dans ce cas, vous avez utilisé navigate pour passer à une autre page.

Si vous ouvrez maintenant votre simulateur, vous pouvez naviguer entre le HomeScreen et le FriendsScreen.

Étape 4 - Utilisation de Context pour transmettre des données à d’autres écrans

Dans cette étape, vous allez créer un ensemble d’amis possibles - Alice, Bob et Sammy - et une série vide d’amis actuels. Vous créerez également une fonctionnalité permettant à l’utilisateur d’ajouter des amis possibles à ses amis actuels.

Ouvrez App.js :

nano App.js

Ajoutez possibleFriends et currentFriends à l’état du composant :

// ...

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      possibleFriends: [
        'Alice',
        'Bob',
        'Sammy',
      ],
      currentFriends: [],
    }
  }

  // ...
}

// ...

Ensuite, ajoutez une fonction permettant de déplacer un ami éventuel dans la liste des amis actuels :

// ...

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      possibleFriends: [
        'Alice',
        'Bob',
        'Sammy',
      ],
      currentFriends: [],
    }
  }

  addFriend = (index) => {
    const {
      currentFriends,
      possibleFriends,
    } = this.state

    // Pull friend out of possibleFriends
    const addedFriend = possibleFriends.splice(index, 1)

    // And put friend in currentFriends
    currentFriends.push(addedFriend)

    // Finally, update the app state
    this.setState({
      currentFriends,
      possibleFriends,
    })
  }

  // ...
}

// ...

À ce stade, vous avez terminé la construction de la fonctionnalité permettant d’ajouter des amis.

Ajouter FriendsContext à App

Vous pouvez maintenant ajouter des amis dans App.jsmais vous voudrez les ajouter à FriendsScreen.js et les faire afficher dans HomeScreen.js. Comme ce projet est construit avec React, vous pouvez injecter cette fonctionnalité dans vos écrans avec context.

Pour éviter une référence circulaire, vous voudrez un nouveau fichier FriendsContext :

nano FriendsContext.js

Exportez FriendsContext :

import React from 'react';

export const FriendsContext = React.createContext();

Ouvrez App.js :

nano App.js

Ajoutez le FriendsContext :

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { FriendsContext } from './FriendsContext';
import Home from './Home';
import Friends from './Friends';

const Stack = createStackNavigator();

class App extends React.Component {
  // ...

  render() {
    return (
      <FriendsContext.Provider>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={Home}
            />
            <Stack.Screen
              name="Friends"
              component={Friends}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </FriendsContext.Provider>
    );
  }
}

// ...

Ce code établit FriendsContext comme nouvel objet Context et enveloppe le NavigationContainer dans un Context.Provider afin que tous les enfants de l’arbre des composants puissent s’abonner aux changements de contexte.

Puisque vous n’utilisez plus View ou Text, il est possible de supprimer ces importations de react-native.

Vous devrez fournir une valeur pour rendre les données accessibles aux consommateurs :

// ...

class App extends React.Component {
  // ...

  render() {
    return (
      <FriendsContext.Provider
        value={
          {
            currentFriends: this.state.currentFriends,
            possibleFriends: this.state.possibleFriends,
            addFriend: this.addFriend
          }
        }
      >
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={Home}
            />
            <Stack.Screen
              name="Friends"
              component={Friends}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </FriendsContext.Provider>
    );
  }
}

// ...

Cela permettra à la HomeScreen et FriendsScreen de référencer tout changement de contexte currentFriends et possibleFriends.

Vous pouvez maintenant travailler sur le référencement du contexte dans vos écrans.

Ajouter FriendsContext à HomeScreen

Dans cette étape, vous configurerez l’application pour afficher le nombre actuel d’amis.

Ouvrez HomeScreen.js :

nano HomeScreen.js

Et ajoutez le FriendsContext :

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class HomeScreen extends React.Component {
  // ...
}
HomeScreen.contextType = FriendsContext;

// ...

Ce code établit un Classe.contexteType. Vous pouvez maintenant accéder au contexte dans vos écrans.

Par exemple, faisons en sorte que votre HomeScreen affiche combien de currentFriends vous avez :

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class Home extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have { this.context.currentFriends.length } friends!</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}
HomeScreen.contextType = FriendsContext;

// ...

Si vous ouvrez à nouveau votre application dans le simulateur et que vous visualisez le HomeScreenvous verrez le message : You have 0 friends!

Ajoutez FriendsContext à FriendsScreen

Dans cette étape, vous configurerez l’application pour afficher les amis possibles et fournir des boutons pour les ajouter aux amis actuels.

Ensuite, ouvrez FriendsScreen.js :

nano FriendsScreen.js

Et ajoutez le FriendsContext :

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class FriendsScreen extends React.Component {
  // ...
}
FriendsScreen.contextType = FriendsContext;

// ...

Ce code établit un Class.contextType.

Maintenant, créez un bouton pour ajouter des amis dans FriendsScreen.js :

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class Friends extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        {
          this.context.possibleFriends.map((friend, index) => (
            <Button
              key={ friend }
              title={ `Add ${ friend }` }
              onPress={() =>
                this.context.addFriend(index)
              }
            />
          ))
        }

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}
FriendsScreen.contextType = FriendsContext;

// ...

Si vous ouvrez à nouveau votre application dans le simulateur et que vous visualisez le FriendsScreen, vous verrez une liste d’amis à ajouter.

Si vous visitez le FriendsScreen et cliquez sur le bouton pour ajouter des amis, vous verrez la liste des possibleFriends diminuer. Si vous visitez le HomeScreen, vous verrez le nombre d’amis augmenter.

Vous pouvez désormais naviguer entre les écrans et partager des données entre eux.

Conclusion

Dans ce tutoriel, vous avez créé un exemple d’application React Native avec plusieurs écrans. En utilisant React Navigation, vous avez imaginé un moyen de naviguer entre les écrans. En utilisant React Context, vous avez développé un moyen de partager des données entre les écrans.

L’ensemble du code source de ce tutoriel est disponible sur GitHub.

Si vous souhaitez approfondir votre connaissance de React Navigation, consultez leur documentation.

React Navigation n’est pas la seule solution de routage et de navigation. Il y a aussi React Native Navigation, React Native Router Fluxet React Router Native.

Si vous souhaitez en savoir plus sur React, consultez notre série Comment coder dans React.js ou consultez notre page thématique React pour des exercices et des projets de programmation.