रिएक्ट नेटिव में फ्लेक्सबॉक्स का उपयोग कैसे करें

फ्लेक्सबॉक्स एक सीएसएस उपकरण है जो आपको लचीला एक-आयामी लेआउट बनाने देता है। यह आपको एक कंटेनर के भीतर तत्वों की स्थिति को नियंत्रित करने में सक्षम बनाता है ताकि स्क्रीन पर अपनी सामग्री को प्रस्तुत करने पर आपका अधिक नियंत्रण हो।

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

प्रतिक्रियाशील मूल और वेब विकास में फ्लेक्सबॉक्स व्यवहार की तुलना करना

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

कंटेनर { दिखाना: मोड़ना; }

लेकिन रिएक्ट नेटिव के साथ, आपको सेट करने की आवश्यकता नहीं है डिस्प्ले: फ्लेक्स संपत्ति। ऐसा इसलिए है क्योंकि रिएक्टिव नेटिव डिफ़ॉल्ट रूप से लेआउट बनाने के लिए फ्लेक्सबॉक्स का उपयोग करता है।

यहाँ कुछ अंतरों को ध्यान में रखना है

HTML तत्वों को संरेखित करने के लिए उपयोग किए जाने पर flexbox कैसे व्यवहार करता है वेब ऐप्स में बनाम रिएक्ट नेटिव में यह कैसे व्यवहार करता है:

• flexDirection डिफॉल्ट करता है पंक्ति वेब अनुप्रयोगों में लेकिन इसके लिए डिफ़ॉल्ट कॉलम प्रतिक्रियाशील मूल में।
• संरेखित सामग्री डिफॉल्ट करता है खींचना वेब अनुप्रयोगों में और फ्लेक्स-स्टार्ट प्रतिक्रियाशील मूल में।
• flexShrink वेब में डिफ़ॉल्ट 1 और रिएक्ट नेटिव में 0 है।

प्रतिक्रियाशील मूल में फ्लेक्सबॉक्स गुणों का उपयोग करना

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

1. रिएक्ट नेटिव में फ्लेक्स प्रॉपर्टी का उपयोग करना

मोड़ना संपत्ति निर्धारित करती है कि कैसे देखना घटक स्क्रीन भरता है। यह संपत्ति 0 से अधिक या उसके बराबर पूर्णांक मान स्वीकार करती है। मान स्क्रीन के अंश को निर्दिष्ट करता है देखना घटक लेना चाहिए।

इस उदाहरण में, आप एक दृश्य के साथ एक स्क्रीन बना रहे हैं प्रतिक्रियाशील मूल घटक पुस्तकालय:

आयात प्रतिक्रिया से"प्रतिक्रिया"
आयात {स्टाइलशीट, देखें} से"प्रतिक्रिया-मूल"
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (
 <>
backroundColor: "#A020F0", मोड़ना: 1}} /> 
 </>
 )
}

यहाँ आउटपुट है:

यहां आपने 1 को फ्लेक्स वैल्यू के रूप में असाइन किया है देखना अवयव। देखना घटक पूरी स्क्रीन (100%) लेता है क्योंकि आपने अंतरिक्ष को एक समूह में विभाजित कर दिया है।

आइए एक और उदाहरण देखें:

आयात प्रतिक्रिया से"प्रतिक्रिया"
आयात {स्टाइलशीट, देखें} से"प्रतिक्रिया-मूल"
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (

backroundColor: "#A020F0", मोड़ना: 1}} />
पृष्ठभूमि का रंग: "#7cb48f", मोड़ना: 3 }} /> 
 </View>
 )
}

यहाँ परिणाम है:

यहाँ आपके पास दो हैं देखना तत्व दूसरे के भीतर देखना तत्व। पहला बच्चा सेट है फ्लेक्स: 1, और दूसरा सेट है फ्लेक्स: 3. वे मान दो बच्चों के बीच के स्थान को विभाजित करते हैं। पहला स्क्रीन का 1/4 हिस्सा लेता है जबकि दूसरा स्क्रीन का 3/4 हिस्सा लेता है (स्क्रीन को 4 ब्लॉक में विभाजित किया गया है क्योंकि 1+3 = 4)।

2. रिएक्ट नेटिव में फ्लेक्सडायरेक्शन प्रॉपर्टी का उपयोग करना

यदि आप उपरोक्त स्क्रीनशॉट को देखते हैं, तो आप देखेंगे कि बाल तत्व एक दूसरे के ऊपर हैं। यह रिएक्ट नेटिव में फ्लेक्सबॉक्स का डिफ़ॉल्ट व्यवहार है (flexDirection के लिए चूक कॉलम कीमत)।

आप भी सेट कर सकते हैं flexDirection संपत्ति को पंक्ति, कॉलम-रिवर्स, और पंक्ति-उलटा. निम्नलिखित उदाहरण में, flexDirection इसके लिए सेट है पंक्ति, इसलिए बाल तत्वों को साथ-साथ रखा गया है:

आयात प्रतिक्रिया से"प्रतिक्रिया"
आयात {स्टाइलशीट, देखें} से"प्रतिक्रिया-मूल"
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 कंटेनर: {
 पृष्ठभूमि का रंग: "#00FF00",
 मोड़ना: 1,
 संरेखित आइटम: "केंद्र",
 फ्लेक्स डायरेक्शन: "पंक्ति",
 },
 वर्ग: {
 पृष्ठभूमि का रंग: "#FF0000",
 चौड़ाई: 98,
 ऊंचाई: 98,
 अंतर: 4,
 },
});
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (




 </View>
 )
}

यहाँ परिणाम है:

सेटिंग करना flexDirection को पंक्ति-उलटा बच्चों को अगल-बगल रखता है, लेकिन यह क्रम को उलट देता है। इसी प्रकार, द कॉलम-रिवर्स बच्चों को एक दूसरे के ऊपर रखता है लेकिन द्वारा परिभाषित एक के विपरीत क्रम में कॉलम.

3. प्रतिक्रियाशील मूल में औचित्य सामग्री का उपयोग करना

सामग्री संपत्ति प्राथमिक अक्ष के साथ एक फ्लेक्सबॉक्स कंटेनर के बाल तत्वों को संरेखित करती है। अगर flexDirection इसके लिए सेट है कॉलम, तो प्राथमिक अक्ष ऊर्ध्वाधर अक्ष है। अगर यह सेट है पंक्ति, तो यह क्षैतिज है।

के संभावित मान सामग्रीहैं फ्लेक्स-स्टार्ट, फ्लेक्स-एंड, केंद्र, अंतरिक्ष के बीच, अंतरिक्ष-चारों ओर, और अंतरिक्ष-समान रूप से.

निम्नलिखित उदाहरण में, flexDirection पंक्ति पर सेट है और सामग्रीइसके लिए सेट है फ्लेक्स-स्टार्ट:

आयात प्रतिक्रिया से"प्रतिक्रिया"
आयात {स्टाइलशीट, देखें} से"प्रतिक्रिया-मूल"
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 कंटेनर: {
 पृष्ठभूमि का रंग: "#00FF00",
 मोड़ना: 1,
 औचित्य सामग्री: "फ्लेक्स-स्टार्ट",
 फ्लेक्स डायरेक्शन: "पंक्ति",
 },
 वर्ग: {
 पृष्ठभूमि का रंग: "#FF0000",
 चौड़ाई: 98,
 ऊंचाई: 98,
 अंतर: 6,
 },
});
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (




 </View>
 )
}

यहाँ आउटपुट है:

यदि आप बदलते हैं flexDirection को कॉलम, फ्लेक्स-स्टार्ट ऊर्ध्वाधर अक्ष पर लागू होगा। तो बक्से एक दूसरे के ऊपर ढेर हो जाएंगे।

सेटिंग सामग्री केंद्र के लिए (जबकि प्राथमिक अक्ष a कॉलम) तीन बच्चों के बक्सों को केंद्र में रखता है।

4. प्रतिक्रियाशील मूल में alignItems का उपयोग करना

संरेखित करें संपत्ति द्वितीयक अक्ष के साथ एक फ्लेक्सबॉक्स कंटेनर में वस्तुओं की नियुक्ति निर्धारित करती है। यह इसके विपरीत है सामग्री. ठीक वैसा सामग्री लंबवत संरेखण का ख्याल रखता है, संरेखित करें क्षैतिज संरेखण संभालती है। के संभावित मान संरेखित करें हैं फ्लेक्स-स्टार्ट, फ्लेक्स-एंड, केंद्र, और आधारभूत.

निम्नलिखित उदाहरण में, flexDirection इसके लिए सेट है पंक्ति और संरेखित करेंइसके लिए सेट है फ्लेक्स-स्टार्ट:

आयात प्रतिक्रिया से"प्रतिक्रिया"
आयात {स्टाइलशीट, देखें} से"प्रतिक्रिया-मूल"
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 कंटेनर: {
 पृष्ठभूमि का रंग: "#00FF00",
 मोड़ना: 1,
 संरेखित आइटम: "फ्लेक्स-स्टार्ट",
 फ्लेक्स डायरेक्शन: "पंक्ति",
 },
 वर्ग: {
 पृष्ठभूमि का रंग: "#FF0000",
 चौड़ाई: 98,
 ऊंचाई: 98,
 अंतर: 6,
 },
});
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (





 </View>
 )
}

यहाँ आउटपुट है:

यदि आप सेट करते हैं flexDirection संपत्ति को कॉलम और संरेखित करें को केंद्र, बॉक्स एक दूसरे के ऊपर रखे जाएंगे, और चिल्ड्रन तत्व केंद्र संरेखित होंगे।

5. प्रतिक्रियाशील मूल में alignSelf का उपयोग करना

स्वयं संरेखित करें संपत्ति निर्धारित करती है कि एक बच्चे को कंटेनर में खुद को कैसे संरेखित करना चाहिए। यह ओवरराइड करता है संरेखित करें, और संभावित मान हैं फ्लेक्स-स्टार्ट, फ्लेक्स-एंड, केंद्र, और आधारभूत.

निम्नलिखित उदाहरण में, हम एक डिफ़ॉल्ट सेट करते हैं संरेखित करें संपत्ति और इसका उपयोग करके ओवरराइड करें स्वयं संरेखित करें:

आयात प्रतिक्रिया से"प्रतिक्रिया"
आयात {स्टाइलशीट, देखें} से"प्रतिक्रिया-मूल"
कॉन्स्ट शैलियाँ = StyleSheet.create ({
 कंटेनर: {
 पृष्ठभूमि का रंग: "#00FF00",
 मोड़ना: 1,
 संरेखित आइटम: "केंद्र", 
 औचित्य सामग्री: "केंद्र", 
 फ्लेक्स डायरेक्शन: "पंक्ति",
 },
 वर्ग: {
 पृष्ठभूमि का रंग: "#FF0000",
 चौड़ाई: 98,
 ऊंचाई: 98,
 अंतर: 6,
 },
});
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (


स्वयं संरेखित करें: "फ्लेक्स-एंड" }]} />
स्वयं संरेखित करें: "फ्लेक्स-स्टार्ट" }]} /> 
 )
}

यहाँ परिणाम है:

अन्य फ्लेक्सबॉक्स गुण

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

• flexWrap: यदि कंटेनर के बच्चे उसमें से ओवरफ्लो हो जाते हैं। उपयोग flexWrap यह निर्दिष्ट करने के लिए कि क्या उन्हें एक पंक्ति में छोटा किया जाना चाहिए या एकाधिक पंक्तियों में लपेटा जाना चाहिए। के लिए संभावित मान flexWrap हैं nowrap और लपेटना.
• अंतर: आप उपयोग करें अंतर संपत्ति कंटेनर में ग्रिड आइटम के बीच अंतराल जोड़ने के लिए। इसका मूल्य उस आकार का होना चाहिए जो आप वस्तुओं के बीच चाहते हैं। आप निर्दिष्ट कर सकते हैं अंतर संपत्ति px, em, या rem जैसी CSS इकाइयों का उपयोग करना.

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

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