Comment gérer la navigation d’une page à une autre dans React Native ?

Lors du développement de l'application, nous souhaitons passer d'un écran à un autre et cela est géré via la navigation React.

Pour travailler sur la page de navigation, nous devons installer certains packages comme indiqué ci-dessous - p>

npm install @react-navigation/native @react-navigation/stack
npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler

Après avoir terminé l'installation ci-dessus, passons maintenant à la configuration de navigation suivante dans React Native.

Créez un dossier appelé Pages/ dans votre projet d'application. Créez 2 fichiers js HomePage.js et AboutPage.js.

pages/HomePage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const HomeScreen = ({ navigation }) => {
   return (
      <Button title="Click Here" onPress={() => navigation.navigate(&#39;About&#39;, { name: &#39;About Page&#39; })}/>
   );
};
export default HomeScreen;

Dans la page d'accueil, nous souhaitons afficher un bouton intitulé "Cliquez ici". En cliquant sur ce bouton, l'utilisateur accédera à l'écran AboutPage. Les détails de

AboutPage sont les suivants -

pages/AboutPage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
export default AboutPage;

Dans la page À propos, nous affichons simplement le texte comme indiqué ci-dessus.

Maintenant, appelons la page dans App.js comme suit -

La page s'appelle comme suit -

import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

De plus, nous devons importer le NavigationContainer de @react-navigation/native qui fera office de conteneur de navigation. Ajoutez createStackNavigator depuis @react-navigation/stack.

Appelez createStackNavigator() comme indiqué ci-dessous -

const Stack = createStackNavigator();

Vous pouvez maintenant ajouter des pages à cette pile en utilisant comme conteneur parent. Stack.Navigation aide votre application à faire la transition entre les écrans, chaque nouvel écran étant placé au sommet de la pile.

<NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} /><Stack.Screen name="About" component={AboutPage} />
</Stack.Navigator></NavigationContainer>

Pour créer une pile pour l'écran d'accueil, procédez comme suit -

<Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} />

Pour créer une pile pour l'écran AboutPage, procédez comme suit -

<Stack.Screen name="About" component={AboutPage} />

Voici le code complet qui aide dans l'écran de navigation dans React Native -

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
const Stack = createStackNavigator();
const MyStack = () => {
   return (
      <Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} /><Stack.Screen name="About" component={AboutPage} />
      
   );
};
export default MyStack;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!