अपने प्रतिक्रियाशील मूल घटकों को लपेटें

नोट: यह पोस्ट पुरानी है। मुझे नहीं लगता कि मैं अब भी कहूंगा कि "रैपिंग" पाठ घटक सबसे अच्छा अभ्यास है। इसके बजाय, मैं एक अलग फ़ाइल में उपयोग की गई आधा दर्जन फ़ॉन्ट शैलियों को परिभाषित कर रहा हूं जिन्हें आयात किया जा सकता है और आवश्यकतानुसार शैली (या भावना) परिभाषाओं में फैलाया जा सकता है।

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

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

यह ग्राफिक दिखाता है कि यह संक्षेप में कैसे काम करता है। मैं इस पर बाद में जाऊंगा लेकिन मैं पहले उल्लेख करना चाहता हूं कि यह इतना महत्वपूर्ण क्यों है कि आप अपने स्वयं के कस्टम कोड में कुछ आरएन कोर घटकों को लपेटते हैं।

यह केवल एक लिपटे घटक का एक उदाहरण है जिसका उपयोग मैं प्यार करने और खुले-खट्टे होने के लिए करता हूं। लेकिन आपको अधिक बार अपने स्वयं के लपेटने की आवश्यकता होगी। मैं समझाऊंगा।

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

  1. टेक्स्ट
  2. महसूस हो सकनेवाला
  3. राय

स्पष्ट होने के लिए, रैपिंग का मतलब है कि आप आरएन से एक के बजाय src से अपने स्वयं के पाठ घटक का आयात और उपयोग करेंगे। तुम्हारी वही लिपटेगी।

टेक्स्ट

आपको लगभग दो कारणों से पाठ को लपेटना होगा। एक कारण यह है कि आप अपने ऐप में हर घटक में समान फ़ॉन्ट आयात और घोषित नहीं करना चाहते हैं। आप सभी टेक्स्ट घटकों के लिए एक फॉन्ट को डिफ़ॉल्ट के रूप में सेट करना चाहते हैं या किसी भी तरह फोंट के बीच आसानी से स्विच कर सकते हैं।

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

पाठ के लिए, हालांकि, आपको किसी भी तरह एक पिक्सेल के रूप में फ़ॉन्ट सेटिंग से बचने की आवश्यकता है। मैं आपको केवल इतना दिखाता हूं कि इस एसओ पद से उधार लेकर मैं क्या उपयोग करता हूं।

संक्षेप में, इस तरह से लपेटना वास्तव में शैलियों को सहारा देता है। कुछ लोग इसे एक विरोधी पैटर्न मान सकते हैं, लेकिन परिणाम डेवलपर के लिए एक अद्भुत उपकरण है, जो न्यूनतम दिमाग वाला है। ‘प्रतिक्रिया-मूल’ से पाठ आयात करने के बजाय आप इसे onents /compenders/Text.js ’या जहाँ भी आप इसे डालने का निर्णय लेते हैं, से आयात करेंगे।

उजागर किए गए प्रॉप्स को आपकी अधिकांश शैलियों को कवर करना चाहिए, ताकि आपको स्टाइल्सशीट प्रविष्टि की आवश्यकता न पड़े।

<पाठ प्रकार = 'बोल्ड' फ़ॉन्ट = = 14 = रंग = '# fff' केंद्र पारदर्शी>

मैं इसका उपयोग कैसे करता हूं यह बहुत साफ है और मुझे पता है कि बिना किसी स्टाइलशीट के संदर्भ के यह पाठ कैसा दिखेगा।

महसूस हो सकनेवाला

इसे लपेटने के लिए बहुत सारे मॉड्यूल हैं, हालांकि कोई भी ऐसा नहीं है जो सभी बहुत लोकप्रिय है, लेकिन आवश्यक बिंदु यह है कि Touchable (NativeFeedback, आदि) को IOS और Android दोनों पर अलग-अलग तरीके से संभाला जाता है, इसलिए आपको इसे React से आयात नहीं करना चाहिए मूल निवासी। आप बहुत सारे बटन कार्यान्वयन भी पा सकते हैं, लेकिन वे शैली में निर्मित होते हैं

राय

व्यू के लिए मैं अपनी प्रतिक्रिया-मूल-पंक्ति घटक की जाँच करने का सुझाव दूंगा।

मैंने अपने अंतिम ऐप के UI को फिर से लाने के लिए कुछ करने का फैसला किया। मुझे एहसास हुआ कि पुन: प्रयोज्य होने वाले तत्वों को खोजने और अपनी घोषणा के योग्य होने के बजाय, मैं इसके बजाय उन दृश्यों को ढूंढ रहा था जिनके तत्वों का अन्य दृश्यों में उपयोग नहीं किया गया था।

मैंने अव्यवस्था को कम करने के अन्य तरीकों के बारे में सोचा। मुझे याद है कि फ्लेक्सडायरेक्शन सेट करना: पंक्ति जब यह अक्सर सेट करने के लिए एकमात्र संपत्ति थी। मैंने बस ऐसा करने के लिए View के आसपास एक आवरण बनाकर शुरू किया। लेकिन फिर मैंने कई बार देखा कि जहां मैंने केवल संरेखण और औचित्य का उपयोग किया था।

कहने के लिए पर्याप्त है कि मैं एक रैपर बना रहा हूं जिसने कुछ ऐसा किया जो मुझे उम्मीद थी कि यह आधा होगा। इसने मेरी स्टाइल्सशीट की घोषणाओं को अनावश्यक करार दिया।

इस दृश्य से शुरू करते हैं यह एक प्रोफ़ाइल प्रबंधन स्क्रीन है। बटन और शायद लोगो के अलावा यहां कोई पुन: प्रयोज्य घटक नहीं हैं। एक स्क्रॉलव्यू घटक है जिसे मैं वास्तव में ऐप में कहीं और उपयोग करने की योजना नहीं बनाता।

इसलिए अनिवार्य रूप से इस पृष्ठ का मुख्य लक्ष्य तत्वों की व्यवस्था करना है, जिनमें से बहुत से पाठ हैं।

तो पृष्ठ के शीर्ष भाग के लिए कोड को देखकर आप इनलाइन शैलियों और स्टाइल स्टाइलशीट उपयोग का एक छोटा मिश्रण देख सकते हैं। आदर्श नहीं है, लेकिन एक ओवर के फायदे ने मुझे कभी भी एक या दूसरे को सम्मेलन के मामले में शासन करने के लिए राजी नहीं किया है।

मैंने इसे थोड़ा बदल दिया, फूहड़ता और गलत शैली के उपयोग को स्वीकार किया, लेकिन इस तरह से सामान हुआ क्योंकि मैं कभी भी शैलियों को संभालने के लिए "बेहतर" तरीके से नहीं उतरा। लेकिन क्या हम वास्तव में "शैलियों" को यहाँ घोषित कर रहे हैं? पाठ शैलियों के बाहर सब कुछ वास्तव में लेआउट की चिंता करता है।

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

देखो कि क्या होता है जब हम फ्लेक्सबॉक्स लेआउट असाइनमेंट को कुछ अधिक सहज और संक्षिप्त के साथ बदलते हैं।

काफी सरल?

प्रतिक्रिया-मूल-पंक्ति पर ध्यान दें: रो फ्लेक्सडायरेक्शन के साथ एक दृश्य है: 'पंक्ति' और डायल एक फोन डायल पर नंबर 5 की स्थिति में सभी बच्चे के घटकों की स्थिति निर्धारित करता है - और फ्लेक्स, एक बूलियन के रूप में उपयोग किया जाता है, सेट करता है। फ्लेक्स प्रॉपर्टी १।

प्रतिक्रिया-मूल-पंक्ति और ऊपर पाठ घटक का उपयोग करते हुए, मैंने सभी फ्लेक्सबॉक्स गुणों को पूरी तरह से शैली से बाहर कर दिया है और मेरे दृश्य को अधिक संवेदनशील बना दिया है।

विचार?

मैं कोई रिएक्ट विशेषज्ञ नहीं हूं, लेकिन मैंने रिएक्ट नेटिव के साथ एक साल बिताया है और यही मेरे लिए मायने रखता है। क्या इसे लागू करने का एक बेहतर तरीका है? शायद। यह एक विरोधी पैटर्न है? शायद। मैं यह सुनना पसंद करता हूं कि लोग क्या सोचते हैं।