देशी प्रतिक्रिया में एक पृष्ठ से दूसरे पृष्ठ पर नेविगेशन को कैसे संभालें?

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

नेविगेट करने वाले पृष्ठों पर काम करने के लिए हमें कुछ पैकेजों को इस प्रकार स्थापित करने की आवश्यकता है -

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

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

पेज/होमपेज.जेएस

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

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

पेज/अबाउटपेज.जेएस

import * as React from 'react';import { Button, View, Alert, Text } from 'react-native';const AboutPage =() => {वापसी आप अबाउट पेज के अंदर पहुंच गए हैं!;};निर्यात डिफ़ॉल्ट AboutPage;

लगभग पृष्ठ में हम ऊपर दिखाए गए पाठ को प्रदर्शित कर रहे हैं।

अब हम App.js में पेजों को इस प्रकार कॉल करते हैं -

पृष्ठों को इस प्रकार कहा जाता है -

'./pages/HomePage' से होमपेज इंपोर्ट करें; './pages/AboutPage' से इंपोर्ट अबाउटपेज;

इसके अलावा हमें नेविगेशन कंटेनर को @ प्रतिक्रिया-नेविगेशन/देशी से आयात करने की आवश्यकता है जो नेविगेशन कंटेनर के रूप में कार्य करेगा। @react-नेविगेशन/स्टैक से createStackNavigator जोड़ें।

जैसा कि नीचे दिखाया गया है, StackNavigator() बनाने के लिए कॉल करें -

कॉन्स्ट स्टैक =createStackNavigator ();

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

होमपेज स्क्रीन के लिए स्टैक बनाने के लिए इसे निम्नानुसार किया जाता है -

अबाउटपेज स्क्रीन के लिए एक स्टैक बनाने के लिए, यह निम्नानुसार किया जाता है -

यहां पूरा कोड है जो रिएक्टिव नेटिव में नेविगेशन स्क्रीन में मदद करता है -

आयात * प्रतिक्रिया के रूप में 'प्रतिक्रिया' से; आयात {नेविगेशनकंटेनर} '@ प्रतिक्रिया-नेविगेशन/देशी' से आयात करें { createStackNavigator } '@ प्रतिक्रिया-नेविगेशन/स्टैक' से आयात करें; './पृष्ठ/होमपेज' से होमपेज आयात करें;'./pages/AboutPage' से अबाउटपेज इंपोर्ट करें; कॉन्स्ट स्टैक =createStackNavigator (); कॉन्स्ट माईस्टैक =() => {रिटर्न ( } विकल्प={{ शीर्षक:'होम पेज से:नेविगेशन' }} />  );};निर्यात डिफ़ॉल्ट माईस्टैक;