मैंने कैसे रिएक्ट नेटिव में नेविगेशन किया, यह इतना भयानक नहीं है

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

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

मानक पुस्तकालयों के साथ बहुत घुट शोक होने के बाद, मैंने अपना खुद का नाविक विकसित करने का फैसला किया। विकास में मुख्य लक्ष्य एपीआई की सादगी, घोंसले के शिकार स्क्रीन के लिए एक कठोर संरचना की कमी और सामग्री के साथ एनिमेशन का अलग होना था। तो प्रतिक्रिया-देशी-आसान-राउटर का जन्म हुआ।

एपीआई सादगी और कठोर संरचना की कमी

मेरे द्वारा पहले उपयोग किए जाने वाले नाविकों में, स्क्रीन पर दिए गए मापदंडों को केवल like रूटर.स्टेट.परम्स.नाम ’जैसे जटिल पथ के साथ ही एक्सेस किया जा सकता है। अपने नाविक में, मैं मापदंडों को सीधे स्क्रीन घटक पर भेजता हूं। कुछ मामलों में, यह एक नाम संघर्ष का कारण बन सकता है, लेकिन मैंने इस समस्या के समाधान की उपेक्षा करने का फैसला किया। इसके अलावा नीचे दिए गए कोड में आप देख सकते हैं कि मार्गों में एक स्पष्ट संरचना नहीं है और आप किसी अन्य स्क्रीन से कोई भी नई स्क्रीन जोड़ सकते हैं।

import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({ name: 'John' })}>Go forward</Text> </View> ) const Second = ({ router, name }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text>Hello {name}!</Text> <Text onPress={() => router.pop()}>Go back</Text> </View> ) const routes = { First, Second } export default () => <Router routes={routes} initialRoute="First" /> 

एनिमेशन

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

 import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({}, {type:'bottom'})}>Go to second screen</Text> </View> ) const Second = ({ router }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text onPress={() => router.pop({type:'right'})}>Go back</Text> </View> ) export default () => <Router routes={{ Screen1, Screen2 }} initialRoute="Screen1" /> 

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

निष्कर्ष

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