स्टैक नेविगेटर का उपयोग करने से आपके ऐप को न्यूनतम कोड के साथ एक स्क्रीन से दूसरी स्क्रीन पर जाने में मदद मिल सकती है।

अक्सर, रिएक्टिव नेटिव ऐप बनाते समय, आप इसे अलग-अलग स्क्रीन जैसे लॉगिन, होम और अबाउट से तैयार करेंगे। फिर आपको एक नेविगेशन तंत्र लागू करने की आवश्यकता होगी ताकि आपके उपयोगकर्ता ऐप को नेविगेट कर सकें और सही क्रम में इसकी अलग-अलग स्क्रीन तक पहुंच सकें।

इस ट्यूटोरियल का उद्देश्य आपको अपने रिएक्टिव नेटिव एप्लिकेशन में एक नेविगेशन सिस्टम स्थापित करने की प्रक्रिया के बारे में बताना है। इसमें लाइब्रेरी स्थापित करना, स्टैक नेविगेटर में अपनी स्क्रीन जोड़ना और अपने प्रत्येक घटक के भीतर स्क्रीन को एक साथ जोड़ना शामिल है।

शुरू करने से पहले

अपने स्थानीय कंप्यूटर पर इस ट्यूटोरियल का पालन करने के लिए, आपको निम्नलिखित इंस्टॉल करना होगा:

  • Node.js v10 या इसके बाद के संस्करण
  • एक्सकोड या एंड्रॉइड स्टूडियो (एमुलेटर चलाने के लिए सेट अप)
  • प्रतिक्रियाशील मूल सीएलआई

अपने रिएक्टिव नेटिव डेवलपमेंट एनवायरनमेंट को कैसे सेट अप करें, इस पर चरण-दर-चरण निर्देशों के लिए, आप इसे पढ़ सकते हैं आधिकारिक प्रतिक्रियाशील मूल निवासी सेट अप प्रलेखन।

instagram viewer

इससे पहले कि आप यह देखना शुरू करें कि हमारे रिएक्ट नेटिव ऐप में नेविगेशन को कैसे लागू किया जाए, आइए समझें कि रिएक्ट नेटिव में स्टैक नेविगेशन मैकेनिज्म कैसे काम करता है।

यह समझना कि स्टैक नेविगेशन कैसे काम करता है

कल्पना कीजिए कि आपका रिएक्टिव नेटिव एप्लिकेशन एक स्टैक है। प्रारंभ में, उस ढेर पर, आपके पास है घर, जो पहली स्क्रीन है जो आपके द्वारा ऐप खोलने पर दिखाई देती है।

यदि आप नेविगेट करने वाले थे के बारे में स्क्रीन से घर स्क्रीन, ऐप पुश करेगा के बारे में ढेर पर, इसलिए यह शीर्ष पर बैठता है घर. इसी तरह, ऐप आपके द्वारा नेविगेट की जाने वाली हर नई स्क्रीन को स्टैक पर धकेलता है।

अब, यदि आप पिछली स्क्रीन पर वापस जाना चाहते हैं, तो ऐप स्टैक से आपकी वर्तमान स्क्रीन को पॉप करता है और आपको उसके नीचे वाली स्क्रीन दिखाता है। यह व्यवहार वैसा ही है जैसा तब होता है जब आप अपने वेब ब्राउज़र में "बैक" आइकन पर क्लिक करते हैं।

स्टैक नेविगेशन मैकेनिज्म की स्पष्ट समझ के साथ, अब इसे रिएक्ट नेटिव ऐप में सेट करने का समय आ गया है।

1. नेटिव ऐप्स के लिए रिएक्ट नेविगेशन इंस्टॉल करें

आरंभ करने के लिए, स्थापित करें प्रतिक्रिया नेविगेशन पैकेज टर्मिनल पर इस कमांड को निष्पादित करके अपने रिएक्टिव नेटिव प्रोजेक्ट में देशी ऐप्स के लिए:

एनपीएम मैं @react-मार्गदर्शन/देशी

आपके द्वारा अभी स्थापित किए गए पैकेज की आवश्यकता है प्रतिक्रियाशील मूल ढेर और प्रतिक्रियाशील मूल स्क्रीन ठीक से चलाने के लिए। आरएन स्टैक को स्थापित करने के लिए, दौड़ें:

एनपीएम मैं @react-मार्गदर्शन/देशी-ढेर

दूसरा स्थापित करने के लिए, इसे चलाएँ:

एनपीएम मैं प्रतिक्रिया करता हूं-देशी-स्क्रीन

अब आपके पास वह सब कुछ है जो आपको अपने एप्लिकेशन में नेविगेशन मैकेनिज्म बनाना शुरू करने के लिए चाहिए। अगला कदम स्क्रीन स्थापित करना है।

2. अपने रिएक्टिव नेटिव ऐप में स्क्रीन सेट करें

इस उदाहरण के लिए, हम केवल दो स्क्रीन बना रहे होंगे — होम स्क्रीन और अबाउट स्क्रीन।

नाम का फोल्डर बनाएं स्क्रीन आपके एप्लिकेशन की रूट डायरेक्टरी के अंदर। बाद में, निर्देशिका के अंदर HomeScreen.js और AboutScreen.js नाम की दो फाइलें बनाएं स्क्रीन.

अपनी HomeScreen.js फ़ाइल में क्या जोड़ें

HomeScreen.js फ़ाइल खोलें और निम्न को आयात करके प्रारंभ करें:

आयात * जैसा प्रतिक्रिया से'प्रतिक्रिया';
आयात {पाठ, दृश्य, स्टाइलशीट, TouchableOpacity} से'प्रतिक्रिया-मूल';
आयात {यूज़स्टेट} से'प्रतिक्रिया'

इसके बाद, होमस्क्रीन फंक्शनल कंपोनेंट बनाएं और ऑब्जेक्ट डिकंस्ट्रक्शन (के अनुसार) का उपयोग करके नेविगेशन ऑब्जेक्ट तक पहुंचें सर्वोत्तम प्रथाओं पर प्रतिक्रिया करें), फिर लगभग स्क्रीन पर नेविगेट करने के लिए एक शीर्षक और बटन वापस करें:

निर्यातगलती करनासमारोहहोम स्क्रीन({मार्गदर्शन}) { 
वापस करना ( 
<देखनाशैली={शैलियों.कंटेनर}>
<मूलपाठशैली={styles.paragraph}> होम स्क्रीन मूलपाठ>
 शीर्षक ="के बारे में जाओ"
 ऑनप्रेस = {() => नेविगेशन.नेविगेट ('स्क्रीन के बारे में')} 
 /> 
देखना>
 );
}

यहां हम रिएक्टिव नेटिव को नेविगेट करने के लिए कह रहे हैं के बारे में जब कोई उपयोगकर्ता बटन दबाता है। इस मामले में, हम स्क्रीन पर कोई डेटा पास नहीं कर रहे हैं। लेकिन मान लीजिए आप चाहते हैं फ़ंक्शन को डेटा पास करें; यहां बताया गया है कि आप ऐसा कैसे करेंगे:

निर्यातगलती करनासमारोहहोम स्क्रीन({मार्गदर्शन}) { 
कॉन्स्ट डेटा = { वेबसाइट का नाम: "जॉन टेक" }
वापस करना ( 
<देखनाशैली={शैलियों.कंटेनर}>
// टेक्स्ट यहां जाता है 
 शीर्षक ="के बारे में जाओ"
 ऑनप्रेस = {() => नेविगेशन.नेविगेट ('स्क्रीन के बारे में', आंकड़े)} 
 /> 
देखना>
 );
}

अब जब आप बटन दबाते हैं, यह कोड डेटा को अगली स्क्रीन पर भेजता है, के बारे में. के अंदर अबाउटस्क्रीन.जेएस फ़ाइल, आप मार्ग से डेटा तक पहुँच सकते हैं और इसे UI पर प्रदर्शित कर सकते हैं।

अपनी AboutScreen.js फ़ाइल में क्या जोड़ें

AboutScreen.js फ़ाइल खोलें और निम्न निर्भरताओं को आयात करके प्रारंभ करें:

आयात * जैसा प्रतिक्रिया से'प्रतिक्रिया';
आयात { टेक्स्ट, व्यू, स्टाइलशीट, बटन} से'प्रतिक्रिया-मूल';

अगला, बनाएँ स्क्रीन के बारे में कार्यात्मक घटक जो से डेटा लेता है मार्ग.परम संपत्ति और यूआई में डेटा लौटाता है:

निर्यातगलती करनासमारोहस्क्रीन के बारे में({मार्ग}) { 
होने देना dataObj = मार्ग.परम
वापस करना ( 
<देखनाशैली={शैलियों.कंटेनर}>
<मूलपाठशैली={styles.paragraph}>
 यह है {dataObj.websiteName} के बारे में स्क्रीन 
मूलपाठ>
देखना>
 );
}

यदि आप याद करते हैं, तो हमने नामित डेटा ऑब्जेक्ट में एक गुण निर्दिष्ट किया था वेबसाइट का नाम, जिसे अब हम अंदर प्रस्तुत करते हैं अवयव। आप ऑब्जेक्ट में जितने चाहें उतने गुण जोड़ सकते हैं, और उन्हें लक्ष्य स्क्रीन घटक के अंदर एक्सेस कर सकते हैं।

अगला कदम हमारे स्टैक नेविगेटर को दो स्क्रीन के साथ सेट करना है।

3. स्टैक नेविगेटर के साथ स्क्रीन कनेक्ट करना

App.js के अंदर, निम्न निर्भरताओं को आयात करके प्रारंभ करें:

आयात * जैसा प्रतिक्रिया से'प्रतिक्रिया';
आयात होम स्क्रीन से'./स्क्रीन्स/होमस्क्रीन'
आयात स्क्रीन के बारे में से'./स्क्रीन्स/अबाउटस्क्रीन'
आयात {नेविगेशन कंटेनर} से"@react-नेविगेशन/देशी"
आयात { createNativeStackNavigator } से"@react-नेविगेशन/नेटिव-स्टैक"

दो और तीन लाइनों पर, हमने अभी बनाई गई दो स्क्रीनों को आयात किया है। फिर, हमने आयात किया नेविगेशन कंटेनर

से @react-navigation/native और createNativeStackNavigator से @ प्रतिक्रिया-नेविगेशन/देशी-स्टैक स्क्रीन कनेक्ट करने में हमारी मदद करने के लिए।

अगला, कॉल करें createNativeStackNavigator ढेर को पुनः प्राप्त करने के लिए:

कॉन्स्ट ढेर = createNativeStackNavigator ()

यह हमें उन स्क्रीन को "स्टैक अप" करने की अनुमति देता है, जिन्हें आप अपने ऐप में बदलना चाहते हैं।

ऐप कंपोनेंट फंक्शन बनाएं और दोनों स्क्रीन को वापस करें जैसा कि नीचे दिया गया है। में लपेटना सुनिश्चित करें या यह काम नहीं करेगा:

निर्यातगलती करनासमारोहअनुप्रयोग() { 
वापस करना ( 
<नेविगेशन कंटेनर>
<ढेर। नाविक>
<ढेर। स्क्रीननाम="होम स्क्रीन"अवयव = {होम स्क्रीन} />
<ढेर। स्क्रीननाम="स्क्रीन के बारे में"अवयव = {स्क्रीन के बारे में} />
ढेर। नाविक>
नेविगेशन कंटेनर>
 );
}

यह कोड होमस्क्रीन स्क्रीन को स्टैक के ऊपर रखता है, जिसका अर्थ है कि ऐप लोड होने के बाद सबसे पहले होम कंपोनेंट को रेंडर करेगा।

अब सब कुछ सेट है। आप क्लिक करके ऐप का परीक्षण कर सकते हैं के बारे में जाओ होम यूआई पर बटन। यह आपको रीडायरेक्ट करना चाहिए के बारे में, और आप पाएंगे वेबसाइट का नाम यूआई में प्रदर्शित संपत्ति:

2 छवियां

नेटिव के लिए रिएक्ट नेविगेशन का उपयोग करने के बारे में सबसे अच्छी बात यह है कि इसे स्थापित करना और उपयोग करना बहुत आसान है। इसके लिए किसी अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता नहीं है (आपके द्वारा इंस्टॉल की गई आवश्यक लाइब्रेरी के अलावा), और आप कनेक्ट भी कर सकते हैं विभिन्न प्रकार के Paywalls (यदि आप सदस्यता-आधारित ऐप बनाने का इरादा रखते हैं)।

रिएक्टिव नेटिव के बारे में अधिक जानें

रिएक्ट नेटिव Android और iOS उपकरणों पर चलने वाले एप्लिकेशन बनाने के लिए एक क्रॉस-प्लेटफ़ॉर्म फ्रेमवर्क है। रिएक्टिव नेटिव के बारे में जानने के लिए बहुत कुछ है, और यदि आप फ्रेमवर्क का उपयोग करने के लिए नए हैं, तो आपको मूल बातें सीखकर शुरुआत करनी चाहिए।