रिएक्ट नेविगेशन के साथ मोबाइल नेविगेशन सिस्टम कैसे बनाएं

मोबाइल ऐप्स में एक नेविगेशन सिस्टम होना चाहिए जो विभिन्न स्क्रीन और कार्यात्मकताओं के माध्यम से उपयोगकर्ताओं को सहजता से मार्गदर्शन करता हो।

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

रिएक्ट नेविगेशन लाइब्रेरी स्थापित करना

रिएक्ट नेविगेशन एक नेविगेशन प्रणाली के निर्माण के लिए तीन मुख्य नेविगेशन पैटर्न, अर्थात् स्टैक, टैब और ड्रॉअर नेविगेशन प्रदान करता है। ये नेविगेशन पैटर्न आपके ऐप के भीतर विभिन्न स्क्रीन के बीच नेविगेशन को व्यवस्थित और प्रबंधित करने के लिए एक रूपरेखा प्रदान करते हैं।

रिएक्ट नेविगेशन का उपयोग शुरू करने के लिए, लाइब्रेरी और इसकी आवश्यक निर्भरताओं को स्थापित करें:

एनपीएम @ प्रतिक्रिया-नेविगेशन/मूल स्थापित करें
एनपीएम प्रतिक्रिया-मूल-स्क्रीन प्रतिक्रिया-मूल-सुरक्षित-क्षेत्र-संदर्भ स्थापित करें

एक नेविगेटर की स्थापना

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

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

आप अपने प्रोजेक्ट के अंदर उपयोग किए जा रहे नेविगेशन पैटर्न को सेट करने के लिए कोड लिख रहे होंगे ऐप.जेएस फ़ाइल।

के अंदर एक नेविगेटर बनाना ऐप.जेएस फ़ाइल कई कारणों से सर्वोत्तम अभ्यास है:

• ऐप.जेएस फ़ाइल आमतौर पर रिएक्टिव नेटिव ऐप में शीर्ष-स्तरीय घटक है। इस फ़ाइल में नेविगेटर को परिभाषित करने से यह सुनिश्चित होगा कि नेविगेशन पदानुक्रम आपके घटक ट्री के उच्चतम स्तर पर है और हर जगह पहुंच योग्य है।
• नेविगेटर को में रखना ऐप.जेएस फ़ाइल आपको नेविगेटर के भीतर स्क्रीन पर ऐप-वाइड स्टेट और प्रोप को आसानी से एक्सेस करने और पास करने की अनुमति देती है।
• प्रतिक्रिया नेविगेशन नेविगेशन कंटेनर नेविगेशन के लिए आवश्यक संदर्भ प्रदान करता है और आमतौर पर अंदर स्थित होता है ऐप.जेएस. नेविगेटर को एक ही फ़ाइल में रखकर, आप इसे आसानी से एकीकृत कर सकते हैं नेविगेशन कंटेनर.

स्टैक नेविगेटर

रिएक्ट नेविगेशन लाइब्रेरी में स्टैक नेविगेटर सबसे लोकप्रिय नेविगेशन पैटर्न है। यह एक स्टैक डेटा संरचना का उपयोग करता है जहां प्रत्येक स्क्रीन एक पूरी तरह से अलग घटक है और पिछले एक के शीर्ष पर खड़ी होती है।

जब एक नई स्क्रीन को स्टैक के ऊपर धकेला जाता है, तो यह सक्रिय स्क्रीन बन जाती है, और पिछली स्क्रीन इसके नीचे फेंक दी जाती है। यह उपयोगकर्ताओं को वेबसाइट के नेविगेशन प्रवाह की तरह स्टैक के माध्यम से आगे और पीछे नेविगेट करने की अनुमति देता है। तुम कर सकते हो एक स्क्रीन से दूसरी स्क्रीन पर जाने के लिए स्टैक नेविगेटर सेट अप करें.

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {नेविगेशन कंटेनर} से'@react-नेविगेशन/देशी';
आयात {createStackNavigator} से'@react-नेविगेशन/स्टैक';
// अपने स्क्रीन घटकों को आयात करें
आयात होम स्क्रीन से'./स्क्रीन्स/होमस्क्रीन';
आयात विवरण स्क्रीन से'./स्क्रीन/विवरणस्क्रीन';
कॉन्स्ट ढेर = createStackNavigator ();
कॉन्स्ट ऐप = () => {
वापस करना (


"घर" घटक = {होमस्क्रीन} />
"विवरण" घटक = {विवरणस्क्रीन} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
निर्यातगलती करना अनुप्रयोग;

उपरोक्त कोड ब्लॉक उपयोग करके एक स्टैक नेविगेटर घटक बनाता है createStackNavigator () नेविगेशन लाइब्रेरी से।

इस उदाहरण में, स्टैक नेविगेटर में दो स्क्रीन हैं: घर और विवरण.

अब स्टैक नेविगेटर स्थापित करें:

एनपीएम @ प्रतिक्रिया-नेविगेशन/स्टैक स्थापित करें

अंदर होम स्क्रीन, आप उपयोग कर सकते हैं मार्गदर्शन स्टैक नेविगेटर का परीक्षण करने के लिए वस्तु:

आयात { स्टाइलशीट, व्यू, बटन} से"प्रतिक्रिया-मूल";
आयात प्रतिक्रिया से"प्रतिक्रिया";
कॉन्स्ट होमस्क्रीन = ({ मार्गदर्शन }) => {
वापस करना (

 शीर्षक ="पर जाए .."
 ऑनप्रेस = {() => नेविगेशन.नेविगेट ("विस्तार स्क्रीन")}
 />
 </View>
 );
};
निर्यातगलती करना होम स्क्रीन;
कॉन्स्ट शैलियाँ = StyleSheet.create ({});

ध्यान दें कि कैसे स्टैक नेविगेटर स्वचालित रूप से पिछली स्क्रीन पर वापस नेविगेशन को संभालने के लिए एक तीर बटन बनाता है।

टैब नेविगेटर

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

आरंभ करने के लिए, स्थापित करें @ प्रतिक्रिया-नेविगेशन/नीचे-टैब पुस्तकालय का उपयोग एनपीएम पैकेज मैनेजर.

साथ createBottomNavigator (), आप टैब नेविगेटर का एक उदाहरण बना सकते हैं जैसा आपने स्टैक नेविगेटर के साथ किया था:

आयात { createBottomTabNavigator } से'@ प्रतिक्रिया-नेविगेशन/बॉटम-टैब';
कॉन्स्ट टैब = createBottomTabNavigator ();

और फिर, उन स्क्रीन को परिभाषित करें जिन्हें आप नेविगेटर के भीतर टैब के रूप में चाहते हैं और नेविगेशन कंटेनर:

निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (


 नाम ="घर"
 घटक = {होमस्क्रीन}
 विकल्प = {{ शीर्षक: "घर" }}
 />
 नाम ="प्रोफ़ाइल"
 घटक = {प्रोफाइलस्क्रीन}
 विकल्प = {{ शीर्षक: "प्रोफ़ाइल" }}
 />
 नाम ="विवरण"
 घटक = {विवरणस्क्रीन}
 विकल्प = {{ शीर्षक: "विवरण" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

अपना ऐप चलाते समय, आपको नीचे अपनी परिभाषित स्क्रीन के साथ एक टैब नेविगेटर देखना चाहिए।

आप इस्तेमाल कर सकते हैं टैबबारपोजिशन ओनेविगेटर को स्थिति में लाने का विकल्प ऊपर, सही, बाएं, या तल (गलती करना)।

दराज नेविगेटर

दराज नेविगेटर, या दराज, मोबाइल एप्लिकेशन में एक सामान्य नेविगेशन पैटर्न हैं। आप किसी बटन को स्वाइप या टैप करके ड्रॉअर खोल सकते हैं। यह दराज को स्क्रीन के किनारे से स्लाइड करने का कारण बनता है, इसकी सामग्री को प्रकट करता है।

दराज नेविगेटर का उपयोग करने के लिए, इसे साथ में स्थापित करें प्रतिक्रिया-देशी-इशारा-हैंडलर और प्रतिक्रिया-मूल-पुनर्जीवित:

एनपीएम @ प्रतिक्रिया-नेविगेशन/दराज स्थापित करें
npm रिएक्ट-नेटिव-जेस्चर-हैंडलर रिएक्ट-नेटिव-रीनिमेट किया गया

आपको अपने अंदर रीएनिमेटेड को भी कॉन्फ़िगर करना होगा बेबल.कॉन्फिग.जेएस फ़ाइल:

मापांकनिर्यात = {
 प्रीसेट: ["बेबेल-प्रीसेट-एक्सपो"],
 प्लगइन्स: ["प्रतिक्रिया-देशी-पुनर्जीवित/प्लगइन"],
};

ड्रॉअर नेविगेटर को कैसे सेट अप करें, इसका एक उदाहरण यहां दिया गया है:

आयात"प्रतिक्रिया-देशी-इशारा-हैंडलर"; // यह आयात सबसे ऊपर होना चाहिए
आयात {देखें, टेक्स्ट, बटन} से"प्रतिक्रिया-मूल";
आयात {createDrawerNavigator} से"@ प्रतिक्रिया-नेविगेशन/दराज";
आयात {नेविगेशन कंटेनर} से"@react-नेविगेशन/नेटिव";
कॉन्स्ट दराज = createDrawerNavigator ();
कॉन्स्ट दराज सामग्री = ({ मार्गदर्शन }) => {
वापस करना (
मोड़ना: 1, संरेखित करें: "केंद्र", सामग्री: "केंद्र" }}>
फ़ॉन्ट आकार: 24, फ़ॉन्ट वजन: "निडर" }}>
 दराज में आपका स्वागत है
 </Text>

 यह कुछ अतिरिक्त सामग्री है जिसे आप प्रदर्शित कर सकते हैं में दराज।
 </Text>
"बंद दराज" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
कॉन्स्ट ऐप = () => (

 प्रारंभिक रूटनाम ="घर"
 दराज सामग्री = {(सहारा) => <दराज सामग्री {...सहारा} />}
 >
 {/* आपकी अन्य स्क्रीन यहां हैं */}
 </Drawer.Navigator>
 </NavigationContainer>
);
निर्यातगलती करना अनुप्रयोग;

इस उदाहरण में, दराज सामग्री घटक के रूप में पारित किया जाता है DrawerContent के लिए सहारा createDrawerNavigator. के अंदर दराज सामग्री घटक, आप पाठ घटकों या किसी अन्य तत्वों और स्टाइल का उपयोग करके वांछित जानकारी प्रदर्शित करने के लिए सामग्री को अनुकूलित कर सकते हैं।

टैब नेविगेटर स्थिर और हमेशा दृश्यमान होते हैं। यह हमेशा सबसे अच्छा नहीं होता है, क्योंकि टैब स्क्रीन के कुछ हिस्सों को ब्लॉक कर देते हैं और फोकस को मुख्य स्क्रीन से दूर ले जा सकते हैं। आप ड्रॉअर को डायनेमिक टैब नेविगेटर के रूप में उपयोग कर सकते हैं और ड्रॉअर के भीतर एक नेविगेशन मेनू बना सकते हैं। उपयोगकर्ता नेविगेशन मेनू खोजने के लिए दराज खोल सकते हैं।

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

ड्रॉअर नेविगेटर से अधिकतम लाभ उठाने के लिए इन सर्वोत्तम प्रथाओं पर विचार करें:

• बहुत सारे विकल्पों के साथ दराज को भारी करने से बचें और सबसे अधिक प्रासंगिक और अक्सर उपयोग की जाने वाली सुविधाओं को प्रस्तुत करने पर ध्यान दें।
• संबंधित वस्तुओं को तार्किक और सहजता से वर्गीकृत करें ताकि उपयोगकर्ताओं को जल्दी से वह मिल सके जो वे ढूंढ रहे हैं।
• दराज में प्रत्येक आइटम के उद्देश्य को समझने में उपयोगकर्ताओं की मदद करने के लिए आइकन या विज़ुअल संकेतक का उपयोग करें।

नेविगेशन प्रॉप्स के साथ डेटा पास करना

रिएक्ट नेविगेशन एक शक्तिशाली तंत्र प्रदान करता है जो आपको नेविगेशन प्रॉप्स के माध्यम से डेटा पास करने की अनुमति देता है।

एक परिदृश्य पर विचार करें जहां आपके पास एक स्क्रीन पर आइटम्स की एक सूची है, और जब कोई उपयोगकर्ता किसी आइटम का चयन करता है, तो आप संबंधित डेटा को दूसरी स्क्रीन पर पास करना चाहते हैं।

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

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {देखें, टेक्स्ट, बटन} से'प्रतिक्रिया-मूल';
कॉन्स्ट होमस्क्रीन = ({ मार्गदर्शन }) => {
कॉन्स्ट हैंडलआइटमप्रेस = (वस्तु) => {
 नेविगेशन.नेविगेट ('विवरण स्क्रीन', { वस्तु });
 };
वापस करना (

सूची का आइटम </Text>
"वस्तु 1" ऑनप्रेस = {() => हैंडल इटैमप्रेस ('आइटम 1 डेटा')} />
"आइटम 2" ऑनप्रेस = {() => हैंडल इटैमप्रेस ('आइटम 2 डेटा')} />
 </View>
 );
};
निर्यातगलती करना होम स्क्रीन;

handleItemPress समारोह का उपयोग करता है नेविगेशन.नेविगेट नेविगेट करने की विधि विवरण स्क्रीन चयनित आइटम डेटा को दूसरे तर्क में पैरामीटर के रूप में पास करते समय।

पास किए गए डेटा को अंदर एक्सेस करने में सक्षम होने के लिए विवरण स्क्रीन घटक, आपको इसकी आवश्यकता होगी मार्गदर्शन सहारा:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {देखें, पाठ} से'प्रतिक्रिया-मूल';
कॉन्स्ट विवरण स्क्रीन = ({ मार्गदर्शन }) => {
कॉन्स्ट आइटम = नेविगेशन.गेटपाराम ('वस्तु', '');
वापस करना (

विवरण स्क्रीन </Text>
{आइटम</Text>
 </View>
 );
};
निर्यातगलती करना विवरण स्क्रीन;

यहां ही विवरण स्क्रीन घटक उपयोग करता है नेविगेशन.getParam नेविगेशन प्रॉप्स से पास किए गए आइटम को पुनः प्राप्त करने के लिए। इस उदाहरण में, डेटा उपलब्ध नहीं होने की स्थिति में एक खाली स्ट्रिंग का एक डिफ़ॉल्ट मान सेट किया गया है। इस तरह, आपका ऐप रेंडर करने पर क्रैश नहीं होगा।

आपके ऐप की जटिलता के आधार पर, आप Redux जैसे राज्य प्रबंधन पुस्तकालयों का उपयोग करके पता लगा सकते हैं या विश्व स्तर पर डेटा को प्रबंधित और साझा करने के लिए संदर्भ API।

अपना नेविगेशन कोड व्यवस्थित करना

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

इसके साथ, आप विकास के अनुभव का आनंद लेते हुए अपने उपयोगकर्ताओं के लिए सहज नेविगेशन बनाना सुनिश्चित कर सकते हैं।