DigitalOcean

Tutorial

Comment utiliser le routage avec React Navigation dans React Native

Published on December 16, 2020
authorauthor

Zeb Girouard and Bradley Kouchi

Français
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 :

Remarque : Si vous avez travaillé avec react-navigation auparavant, vous pourriez rencontrer certaines différences. Vous pouvez consulter la documentation pour les guides pour migrer de 3.x et migrer de 4.x.

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 :

  1. npx react-native init MySocialNetwork --version 0.63.2

Ensuite, naviguez vers le nouveau répertoire :

  1. cd MySocialNetwork

Et lancez l’application pour iOS :

  1. npm run ios

Ou alors, pour Android :

  1. npm run android

Note : Si vous rencontrez des problèmes, vous devrez peut-être consulter Résolution de problèmes pour React Native CLI.

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 :

  1. nano App.js

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

App.js
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 :

  1. cp App.js HomeScreen.js

Ouvrez HomeScreen.js:

  1. nano HomeScreen.js

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

HomeScreen.js
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 :

  1. cp App.js FriendsScreen.js

Ouvrez FriendsScreen.js :

  1. nano FriendsScreen.js

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

FriendsScreen.js
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 :

  1. npm install @react-navigation/native@5.7.3

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

  1. 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

Remarque : Si vous développez pour iOS, vous pouvez avoir besoin de naviguer vers le répertoireios et exécuter pod install.

Ensuite, revisitez App.js :

  1. nano App.js

Ajoutez NavigationContainer et createStackNavigator à App.js :

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 :

App.js
// ...

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

// ...

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

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';
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 :

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';
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.

Remarque : Cela diffère de la façon dont createStackNavigator a été utilisé dans les versions précédentes de React Navigation.

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 :

HomeScreen.js
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 :

FriendsScreen.js
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.

HomeScreen et FriendsScreen

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 :

  1. nano App.js

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

App.js
// ...

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 :

App.js
// ...

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.

Note : Dans les versions précédentes de React Navigation, il était possible d’utiliser screenProps pour partager les données entre les écrans. Dans la version actuelle de React Navigation, il est recommandé d’utiliser React Context pour partager les données entre les écrans.

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

  1. nano FriendsContext.js

Exportez FriendsContext :

FriendsContext
import React from 'react';

export const FriendsContext = React.createContext();

Ouvrez App.js :

  1. nano App.js

Ajoutez le FriendsContext :

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';
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 :

App.js
// ...

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 :

  1. nano HomeScreen.js

Et ajoutez le FriendsContext :

HomeScreen.js
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 :

HomeScreen.js
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 :

  1. nano FriendsScreen.js

Et ajoutez le FriendsContext :

FriendsScreen.js
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 :

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.

HomeScreen avec 0 currentFriends et FriendsScreen avec 3 possibleFriends

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author(s)

Zeb Girouard
See author profile
Category:
Tutorial
Tags:
React

Still looking for an answer?

Ask a questionSearch for more help
Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Comment
Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Sign Up

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Learn more

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Learn more

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.

© 2025 DigitalOcean, LLC.Sitemap.