घटक पुस्तकालय अनुकूलन योग्य और पुन: प्रयोज्य कोड का एक संग्रह है जिसे एक विशिष्ट ऐप के डिज़ाइन पैटर्न के अनुरूप बनाया जा सकता है। वे प्लेटफार्मों भर में सुसंगत डिजाइन बनाए रखने और विकास प्रक्रिया को गति देने में मदद करते हैं।

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

प्रतिक्रियाशील मूल तत्व क्या है?

रिएक्टिव नेटिव एलिमेंट्स (आरएनई) रिएक्ट नेटिव डेवलपर्स द्वारा एक घटक पुस्तकालय बनाने के लिए एक ओपन-सोर्स प्रयास है जो एंड्रॉइड, आईओएस और वेब ऐप बनाते समय उपयोगी हो सकता है। बहुतों के विपरीत अन्य प्रतिक्रियाशील मूल घटक पुस्तकालय, RNE टाइपस्क्रिप्ट सिंटैक्स का समर्थन करता है।

पुस्तकालय में 30 से अधिक घटक होते हैं जो घटक संरचना पर ध्यान केंद्रित करते हैं।

रिएक्टिव नेटिव एलिमेंट्स को रिएक्टिव नेटिव सीएलआई के साथ इंस्टॉल करना

रिएक्ट नेटिव क्लि का उपयोग करके बनाए गए प्रोजेक्ट में रिएक्टिव नेटिव एलिमेंट्स को स्थापित करने के लिए निम्नलिखित निर्देश हैं।

चलाकर अपने नंगे रिएक्टिव नेटिव ऐप में रिएक्टिव नेटिव एलिमेंट्स इंस्टॉल करें:

instagram viewer 
एनपीएम इंस्टॉल करें @rneui/themed @rneui/base

आपको प्रतिक्रिया-मूल-वेक्टर-आइकन और सुरक्षित-क्षेत्र-संदर्भ भी स्थापित करना चाहिए:

NPM स्थापित करना प्रतिक्रिया-देशी-वेक्टर-प्रतीक प्रतिक्रिया-देशी-सुरक्षित-क्षेत्र-प्रसंग

एक्सपो प्रोजेक्ट में प्रतिक्रियाशील मूल तत्वों को कैसे स्थापित करें

किसी मौजूदा में प्रतिक्रियाशील मूल तत्वों को स्थापित करने के लिए एक्सपो परियोजना, पैकेज स्थापित करें और प्रतिक्रिया-मूल-सुरक्षित-क्षेत्र-संदर्भ:

सूत जोड़ें @rneui/themed @rneui/आधार प्रतिक्रिया-देशी-सुरक्षित-क्षेत्र-संदर्भ

निर्भरता संघर्ष के जोखिम से बचने के लिए संकुल स्थापित करते समय एनपीएम या यार्न जैसे एक पैकेज प्रबंधक को बनाए रखें।

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

स्टाइलिंग सिंगल रिएक्टिव नेटिव एलिमेंट्स कंपोनेंट्स

RNE के माध्यम से उपलब्ध सभी घटक घटक और घटक के कंटेनर को स्टाइल करने के लिए विभिन्न प्रॉप लेते हैं।

घटक का कंटेनर एक बुनियादी है एक घटक टैग के चारों ओर लपेटने वाला टैग, जैसे. टैग घटक के चारों ओर अजेय है और एक लेता है कंटेनर स्टाइल दृश्य शैलियों को लागू करने के लिए सहारा।

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

घटक के लिए ये सभी बाहरी शैलियाँ हैं।

उदाहरण के लिए, स्टाइलिंग बटन अवयव:

आयात { देखना } से "प्रतिक्रिया-मूल";
आयात { बटन } से "@rneui/थीम्ड";
कॉन्स्ट MyComponent = () => {
वापस करना (
<देखना>
<बटन
 बटन शैली = {{पृष्ठभूमि रंग: "स्लेटी" }}
 कंटेनर स्टाइल = {{चौड़ाई: 150}}
>
 ठोस बटन
</Button>
<बटन
 टाइप ="खाका"
 कंटेनर स्टाइल = {{चौड़ाई: 150, मार्जिन: 10}}
 शीर्षक ="रूपरेखा बटन"
 />
</View>
 );
}

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

रिएक्टिव नेटिव एलिमेंट्स कंपोनेंट्स के लिए थीम बनाना

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

आरएनई प्रदान करता है क्रिएटथीम () शैली घटकों के लिए कार्य। यह फ़ंक्शन थीम शैलियों को धारण करेगा जो प्रत्येक घटक की आंतरिक या डिफ़ॉल्ट शैलियों को ओवरराइड करता है।

थीम बनाने के लिए कॉल करें क्रिएटथीम () और वांछित थीम शैलियों को फ़ंक्शन तर्क के रूप में पास करें:

आयात {थीमप्रोवाइडर, क्रिएटथीम} से '@rneui/थीम्ड';
कॉन्स्ट थीम = क्रिएटथीम ({
 अवयव: {
 बटन: {
 कंटेनर स्टाइल: {
 मार्जिन: 10,
 },
 शीर्षक शैली: {
 रंग: "काला",
 },
 },
 },
});

थीमप्रदाता इसके अंदर लिपटे किसी भी घटक पर स्टाइल लागू करेगा।

प्रदाता एक स्वीकार करता है थीम प्रोप जो ऊपर बनाई गई थीम पर सेट है:

<थीमप्रोवाइडर थीम = {थीम}>
<बटन शीर्षक ="थीम्ड बटन" />
</ThemeProvider>
<बटन शीर्षक ="सामान्य बटन" />
2 छवियां

थीम शैलियाँ आंतरिक या डिफ़ॉल्ट घटक शैलियों को ओवरराइड करती हैं लेकिन बाहरी घटक शैलियों को ओवरराइड नहीं करेंगी।

RNE की प्राथमिकता का क्रम बाहरी शैलियों को पदानुक्रम के शीर्ष पर रखता है।

उदाहरण:

// थीम
कॉन्स्ट थीम = क्रिएटथीम ({
 अवयव: {
 बटन: {
 कंटेनर स्टाइल: {
 मार्जिन: 10,
 पृष्ठभूमि का रंग: "लाल",
 },
 },
 },
});
//Component
<थीमप्रोवाइडर थीम = {थीम}>
<बटन शीर्षक ="थीम्ड बटन" रंग = {"माध्यमिक"}/>
</ThemeProvider>

उपरोक्त कोड में, पृष्ठभूमि का रंग बटन घटक द्वितीयक होगा, जो लाल रंग की थीम शैली के विपरीत हरा रंग है।

ए थीम ऑब्जेक्ट को RNE के साथ शिप किया जाता है, बॉक्स से बाहर कई डिफ़ॉल्ट रंग मान प्रदान करता है। RNE जैसे विभिन्न विकल्प प्रदान करता है थीमउपभोक्ता अवयव, यूज़थीम () हुक, और मेक स्टाइल्स () हुक जनरेटर का उपयोग करने के लिए थीम वस्तु।

थीमउपभोक्ता घटक आपके घटकों को अज्ञात फ़ंक्शन के साथ प्रस्तुत करेगा। यह अनाम कार्य लेता है थीम एक सहारा के रूप में।

आप ए के साथ थीम मूल्यों तक पहुंच सकते हैं शैली सहारा:

आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात { बटन } से 'प्रतिक्रिया-मूल';
आयात {थीमउपभोक्ता} से '@rneui/थीम्ड';
कॉन्स्ट MyComponent = () => (
<थीमउपभोक्ता>
 {({विषय}) => (
<बटन शीर्षक ="थीमउपभोक्ता" शैली = {{रंग: विषय.रंग.प्राथमिक}} />
 )}
</ThemeConsumer>
)

वैकल्पिक रूप से, आप का उपयोग कर सकते हैं यूज़थीम () किसी घटक के अंदर थीम तक पहुँचने के लिए हुक।

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

आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात { बटन } से 'प्रतिक्रिया-मूल';
आयात {यूज़थीम} से '@rneui/थीम्ड';
कॉन्स्ट MyComponent = () => {
कॉन्स्ट {थीम} = थीम का उपयोग करें ();
वापस करना (
<शैली देखें={styles.container}>
<बटन शीर्षक ="थीम का उपयोग करें" शैली = {{रंग: विषय.रंग.प्राथमिक}}/>
</View>
 );
};

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

टाइपस्क्रिप्ट के साथ थीम्स का विस्तार

RNE आपके ऐप में टाइपस्क्रिप्ट घोषणाओं का समर्थन करता है, जिससे डेवलपर्स इसका लाभ उठा सकते हैं टाइपस्क्रिप्ट भाषा का उपयोग करने के लाभ.

टाइपस्क्रिप्ट के साथ घोषणा विलय, आप RNE के डिफ़ॉल्ट और कस्टम घटकों दोनों के लिए कस्टम रंग और प्रॉप जोड़ने के लिए थीम परिभाषाओं का विस्तार कर सकते हैं।

थीम ऑब्जेक्ट के अंदर रंगों का विस्तार करने के लिए, आप एक अलग टाइपस्क्रिप्ट.टीएस फ़ाइल और मॉड्यूल घोषित करें @rneui/थीम्ड फ़ाइल के अंदर।

फिर आप अपने कस्टम रंग जोड़ने के लिए आगे बढ़ सकते हैं और उनके अपेक्षित प्रकार को निर्दिष्ट कर सकते हैं:

// ** टाइपस्क्रिप्ट.टीएस **
आयात '@rneui/themed';
घोषित मापांक '@rneui/थीम्ड' {
 निर्यात इंटरफेसरंग की{
 प्राइमरीलाइट: स्ट्रिंग;
 सेकेंडरीलाइट: स्ट्रिंग; 
 }
}

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

कॉन्स्ट थीम = क्रिएटथीम ({
 रंग की: {
 प्राइमरीलाइट: "",
	माध्यमिक रोशनी: ""
 },
})

अब कस्टम रंग आपके थीम ऑब्जेक्ट का हिस्सा हैं और इसका उपयोग करके इसे एक्सेस किया जा सकता है थीम प्रदाता, थीम उपभोक्ता, या यूज़थीम () अंकुश।

आरएनई अवयव बनाम। प्रतिक्रियाशील मूल घटक

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