आपके ऐप को स्टाइल करना इस प्रकार किया जा सकता है -
- स्टाइलशीट घटक का उपयोग करना
- इनलाइन शैलियों का उपयोग करना
स्टाइलशीट घटक का उपयोग करना
जब आप अपने ऐप में स्टाइल लागू करना चाहते हैं तो रिएक्ट नेटिव स्टाइलशीट घटक बहुत काम आता है और साफ-सुथरा होता है। स्टाइलशीट घटक के साथ काम करने के लिए पहले इसे नीचे दिखाए अनुसार आयात करें -
'react-native' से आयात { StyleSheet };
आप इस प्रकार स्टाइलशीट घटक का उपयोग करके शैली बना सकते हैं -
कॉन्स्ट स्टाइल =स्टाइलशीट.क्रिएट ({कंटेनर:{फ्लेक्स:1, मार्जिनटॉप:स्टेटसबार। करंट हाइट || 0,}, आइटम:{मार्जिन:10, पैडिंग:20, मार्जिन वर्टिकल:8, मार्जिन हॉरिजॉन्टल:16,}} );
उपरोक्त शैली का उपयोग आपके कोड के अंदर निम्नानुसार किया जा सकता है -
यहाँ एक उदाहरण है जो फ़्लैटलिस्ट घटक के प्रदर्शन के लिए स्टाइलशीट का उपयोग करता है -
उदाहरण 1
<पूर्व> "प्रतिक्रिया" से आयात प्रतिक्रिया; "प्रतिक्रिया-मूल" से आयात {फ्लैटलिस्ट, टेक्स्ट, व्यू, स्टाइलशीट, स्टेटसबार}; निर्यात डिफ़ॉल्ट वर्ग ऐप रिएक्ट का विस्तार करता है। घटक {कन्स्ट्रक्टर () {सुपर (); this.state ={डेटा:[{नाम:"जावास्क्रिप्ट फ्रेमवर्क", शीर्षक:सत्य}, {नाम:"कोणीय", शीर्षक:झूठा}, {नाम:"ReactJS", शीर्षक:झूठा}, { नाम:"VueJS" ", isTitle:false }, { name:"ReactNative", isTitle:false}, {name:"PHP Frameworks", isTitle:true}, {name:"Laravel", isTitle:false}, { name:"CodeIgniter" , isTitle:false }, { name:"KakePHP", isTitle:false }, {name:"Symfony", isTitle:false } ], स्टिकीहैडरइंडिसेस:[] }; } रेंडरइटम =({आइटम}) => {रिटर्न ( )? "लाल":"ग्रे"}}> {item.name} पाठ> देखें>); }; रेंडर () {वापसी ( <देखें शैली ={शैली। कंटेनर}> <फ्लैटलिस्ट डेटा ={यह। राज्य। डेटा} रेंडरइटम ={यह। रेंडरइटम} कीएक्सट्रैक्टर ={आइटम => आइटम। नाम} स्टिकीहेडरइंडिस ={यह। राज्य .stickyHeaderIndices} /> ); }}कॉन्स्ट स्टाइल =StyleSheet.create({कंटेनर:{फ्लेक्स:1, मार्जिनटॉप:StatusBar.currentHeight || 0,}, आइटम:{मार्जिन:10, पैडिंग:20, मार्जिन वर्टिकल:8, मार्जिन हॉरिजॉन्टल:16,}});आउटपुट
इनलाइन शैलियों का उपयोग करना
स्टाइल इनलाइन जोड़ने के लिए आप स्टाइल प्रॉपर्टी का उपयोग कर सकते हैं। हालांकि, यह सबसे अच्छा अभ्यास नहीं है क्योंकि कोड को पढ़ना मुश्किल हो सकता है। प्रतिक्रियाशील घटक के अंदर इनलाइन शैली का उपयोग करने के तरीके पर काम करने का एक उदाहरण यहां दिया गया है
उदाहरण 2
डिफ़ॉल्ट ऐप निर्यात करें;
<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; 'प्रतिक्रिया-मूल' से आयात {बटन, दृश्य, चेतावनी}; कॉन्स्ट ऐप =() => {वापसी (<शैली देखें ={{फ्लेक्स:1, औचित्य सामग्री:'केंद्र') , मार्जिन:15 }}> <बटन शीर्षक ="मुझे क्लिक करें" रंग ="# 9C27B0" onPress={() => Alert.alert('React Native के लिए परीक्षण बटन')} /> );}आउटपुट