Comment utiliser le routage avec React Navigation dans React Native

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.

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.

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.

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.

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!

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.