Pokepark Wii

I - Quelques bases

Afin de bien appréhender le fonctionnement de l'outil, il est important de revoir certaines bases du fonctionnement de React Navigation. Sans cette étape, vous risquez de vous arracher les cheveux assez rapidement.

A - Navigation de base

Nous allons commencer par un exemple simple : une navigation entre deux écrans, avec un bouton permettant de naviguer de l'un à l'autre.

Dans cet exemple, nous avons deux écrans :

• Home
• Details

Et nous avons un bouton sur l'écran Home qui permet de naviguer vers l'écran Details.

Voici le code de l'écran Home :

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

function HomeScreen({ navigation }) {
  return (
    
      Home Screen
       navigation.navigate('Details')}
      />
    
  );
}

Et voici le code de l'écran Details :

function DetailsScreen() {
  return (
    
      Details Screen
    
  );
}

Enfin, voici le code de la navigation :

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
function App() {
  return (
    
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      
    
  );
}
export default App;

Quelques explications :

• Nous utilisons un Stack Navigator, qui est le type de navigation le plus simple.
• Nous définissons deux écrans : Home et Details.
• Nous définissons un écran initial : Home.
• Nous utilisons la fonction navigation.navigate pour naviguer vers l'écran Details.

B - Paramètres

Maintenant, nous allons voir comment passer des paramètres entre les écrans.

Nous allons reprendre l'exemple précédent, et nous allons passer un paramètre de l'écran Home à l'écran Details.

Voici le code de l'écran Home :

function HomeScreen({ navigation }) {
  return (
    
      Home Screen
       {
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    
  );
}

Et voici le code de l'écran Details :

function DetailsScreen({ route, navigation }) {
  / 2. Get the param /
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    
      Details Screen
      itemId: {JSON.stringify(itemId)}
      otherParam: {JSON.stringify(otherParam)}
      
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
         navigation.navigate('Home')} />
       navigation.goBack()} />
         navigation.popToTop()}
      />
    
  );
}

Quelques explications :

• Nous utilisons la fonction navigation.navigate pour naviguer vers l'écran Details, et nous passons un objet en deuxième paramètre.
• Cet objet contient les paramètres que nous voulons passer à l'écran Details.
• Dans l'écran Details, nous récupérons les paramètres grâce à l'objet route.params.

I - Quelques bases

Afin de bien appréhender le fonctionnement de l'outil, il est important de revoir certaines bases du fonctionnement de React Navigation. Sans cette étape, vous risquez de vous arracher les cheveux assez rapidement.

A - Navigation de base

Nous allons commencer par un exemple simple : une navigation entre deux écrans, avec un bouton permettant de naviguer de l'un à l'autre.

Dans cet exemple, nous avons deux écrans :

• Home
• Details

Et nous avons un bouton sur l'écran Home qui permet de naviguer vers l'écran Details.

Voici le code de l'écran Home :

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

function HomeScreen({ navigation }) {
  return (
    
      Home Screen
       navigation.navigate('Details')}
      />
    
  );
}

Et voici le code de l'écran Details :

function DetailsScreen() {
  return (
    
      Details Screen
    
  );
}

Enfin, voici le code de la navigation :

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
function App() {
  return (
    
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      
    
  );
}
export default App;

Quelques explications :

• Nous utilisons un Stack Navigator, qui est le type de navigation le plus simple.
• Nous définissons deux écrans : Home et Details.
• Nous définissons un écran initial : Home.
• Nous utilisons la fonction navigation.navigate pour naviguer vers l'écran Details.

B - Paramètres

Maintenant, nous allons voir comment passer des paramètres entre les écrans.

Nous allons reprendre l'exemple précédent, et nous allons passer un paramètre de l'écran Home à l'écran Details.

Voici le code de l'écran Home :

function HomeScreen({ navigation }) {
  return (
    
      Home Screen
       {
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    
  );
}

Et voici le code de l'écran Details :

function DetailsScreen({ route, navigation }) {
  / 2. Get the param /
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    
      Details Screen
      itemId: {JSON.stringify(itemId)}
      otherParam: {JSON.stringify(otherParam)}
      
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
         navigation.navigate('Home')} />
       navigation.goBack()} />
         navigation.popToTop()}
      />
    
  );
}

Quelques explications :

• Nous utilisons la fonction navigation.navigate pour naviguer vers l'écran Details, et nous passons un objet en deuxième paramètre.
• Cet objet contient les paramètres que nous voulons passer à l'écran Details.
• Dans l'écran Details, nous récupérons les paramètres grâce à l'objet route.params.