React Native में एक पेज से दूसरे पेज पर नेविगेशन कैसे हैंडल करें

ऐप पर काम करते समय, हम एक स्क्रीन से दूसरी स्क्रीन पर स्विच करना चाहेंगे और इसे React Navigation द्वारा हैंडल किया जाता है।

पेज नेविगेट करने के लिए हमें कुछ पैकेज इंस्टॉल करने होंगे:

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

एक बार उपरोक्त इंस्टॉलेशन पूरा हो जाने पर, आइए अब React Native में नेविगेशन के अगले सेटअप के साथ आगे बढ़ें।

आपके ऐप प्रोजेक्ट में pages/ नामक एक फ़ोल्डर बनाएं। 2 js फ़ाइलें बनाएं: HomePage.js और AboutPage.js।

pages/HomePage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const HomeScreen = ({ navigation }) => {
    return (
         navigation.navigate('About', { name: 'About Page' })}/>
    );
};
export default HomeScreen;

होम पेज में, हम Click Here शीर्षक के साथ एक बटन प्रदर्शित करना चाहते हैं। बटन पर क्लिक करने पर उपयोगकर्ता AboutPage स्क्रीन पर नेविगेट करेगा।

AboutPage का विवरण इस प्रकार है:

pages/AboutPage.js

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

About पेज में हम ऊपर दिखाए अनुसार केवल टेक्स्ट प्रदर्शित कर रहे हैं।

अब आइए App.js में पेजेज को कॉल करें:

पेजेज को इस प्रकार कॉल किया जाता है:

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

इसके अलावा हमें @react-navigation/native से NavigationContainer इम्पोर्ट करना होगा जो नेविगेशन कंटेनर के रूप में कार्य करेगा। @react-navigation/stack से createStackNavigator जोड़ें।

createStackNavigator() को कॉल करें जैसा कि नीचे दिखाया गया है:

const Stack = createStackNavigator();

अब आप <Stack.Navigator> को पैरेंट कंटेनर के रूप में उपयोग करके इस Stack में पेजेज जोड़ सकते हैं। Stack.Navigation आपके ऐप को स्क्रीन के बीच ट्रांजिशन करने में मदद करता है जहां प्रत्येक नई स्क्रीन एक स्टैक के ऊपर रखी जाती है।

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

HomePage स्क्रीन के लिए स्टैक बनाना इस प्रकार किया जाता है:

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

AboutPage स्क्रीन के लिए स्टैक बनाना, यह इस प्रकार किया जाता है:

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

यहां पूरा कोड दिया गया है जो 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 (
        
        
    );
};
export default MyStack;