Table of Contents
URL: https://www.progressiverobot.com/react-react-native-navigation-fr/
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.
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 :
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
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 :
nano App.js
Remplacez le contenu d’App.js avec le code suivant pour afficher un message de bienvenue :
[label 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 :
cp App.js HomeScreen.js
Ouvrez HomeScreen.js:
nano HomeScreen.js
Modifiez HomeScreen.js pour utiliser HomeScreen au lieu d’App :
[label 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 :
cp App.js FriendsScreen.js
Ouvrez FriendsScreen.js :
nano FriendsScreen.js
Modifiez FriendsScreen.js pour utiliser FriendsScreen au lieu d’App :
[label 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 :
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<^>
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 :
nano App.js
Ajoutez NavigationContainer et createStackNavigator à App.js :
[label 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 :
[label 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 :
[label 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 :
[label 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 :
[label 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 :
[label 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.
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 :
[label 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 :
[label 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 :
nano FriendsContext.js
Exportez FriendsContext :
[label FriendsContext]
import React from 'react';
export const FriendsContext = React.createContext();
Ouvrez App.js :
nano App.js
Ajoutez le FriendsContext :
[label 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 :
[label 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 :
nano HomeScreen.js
Et ajoutez le FriendsContext :
[label 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 :
[label 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 :
nano FriendsScreen.js
Et ajoutez le FriendsContext :
[label 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 :
[label 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.
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.
