रिएक्ट नेटिव में सबसे महत्वपूर्ण मुख्य घटक इस प्रकार हैं -
प्रतिक्रिया मूल घटक | एंड्रॉइड नेटिव व्यू | आईओएस नेटिव व्यू | वेब ब्राउज़र | <थ>विवरण|
---|---|---|---|---|
देखें - <देखें> | जब ऐप को Android डिवाइस में देखा जाता है तो | जब ऐप को IOS डिवाइस में देखा जाता है तो | वेब ब्राउज़र में देखे जाने पर टैग में बदल दिया जाएगा | यह कोर कंटेनर है जो फ्लेक्सबॉक्स लेआउट का समर्थन करता है। यह टच हैंडलिंग को भी मैनेज करता है। |
पाठ्य - <पाठ> | जब ऐप को Android डिवाइस में देखा जाता है, तो | जब ऐप को IOS डिवाइस में देखा जाता है तो | वेब ब्राउज़र में देखे जाने पर <पाठ> घटक को
टैग में बदल दिया जाएगा | उपयोगकर्ता को टेक्स्ट प्रदर्शित करने के लिए उपयोग किया जाता है। यह स्टाइलिंग और टच इवेंट्स को भी हैंडल करता है। |
छवि - <छवि> | जब ऐप को Android डिवाइस में देखा जाता है, तो | जब ऐप को IOS डिवाइस में देखा जाता है तो | वेब ब्राउज़र में देखे जाने पर | छवियों को प्रदर्शित करने के लिए उपयोग किया जाता है। |
स्क्रॉलव्यू - <स्क्रॉल व्यू> | जब ऐप को Android डिवाइस में देखा जाता है तो <स्क्रॉलव्यू> घटक को <स्क्रॉलव्यू> में बदल दिया जाएगा | जब ऐप को IOS डिवाइस में देखा जाता है तो | वेब ब्राउज़र में देखे जाने पर टैग में बदल दिया जाएगा | स्क्रॉलिंग कंटेनर जिसमें घटक और दृश्य हैं। |
टेक्स्ट इनपुट - <टेक्स्टइनपुट> | जब ऐप को Android डिवाइस में देखा जाता है तो | जब ऐप को IOS डिवाइस में देखा जाता है तो | जब वेब ब्राउज़र के अंदर देखा जाता है तो | इनपुट तत्व जहां उपयोगकर्ता टेक्स्ट दर्ज कर सकता है |
उदाहरण
टेक्स्ट, व्यू, इमेज, स्क्रॉलव्यू, टेक्स्ट इनपुट के साथ काम करने के लिए, आपको रिएक्ट-नेटिव से घटकों को आयात करना होगा जैसा कि नीचे दिखाया गया है -
'react-native' से आयात {देखें, टेक्स्ट, इमेज, स्क्रॉलव्यू, टेक्स्ट इनपुट};
व्यू कंपोनेंट का इस्तेमाल मुख्य रूप से टेक्स्ट, बटन, इमेज आदि को होल्ड करने के लिए किया जाता है। कंपोनेंट का इस्तेमाल इस तरह किया जाता है -
इनसाइड व्यू कंटेनर
इसमें टेक्स्ट और इमेज कंपोनेंट है। स्क्रॉलव्यू घटक मूल घटक की तरह व्यवहार करता है जो दृश्य, पाठ, छवि, बटन और अन्य प्रतिक्रियाशील मूल घटक को संभालता है।
<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; आयात {देखें, पाठ, छवि, स्क्रॉलव्यू, टेक्स्ट इनपुट} 'प्रतिक्रिया-मूल' से; कॉन्स्ट ऐप =() => {वापसी ( <स्क्रॉल व्यू> <पाठ शैली ={{ पैडिंग:"10%", रंग:"हरा", "फ़ॉन्ट आकार":"25" }}> ट्यूटोरियल पॉइंट में आपका स्वागत है!पाठ> <देखें> <पाठ शैली ={{ पैडिंग:"10%", रंग:"लाल" }}>इनसाइड व्यू कंटेनरटेक्स्ट> <इमेज सोर्स={{ uri:'https://www.tutorialspoint.com/react_native/images/logo.png', }} स्टाइल={{चौड़ाई:311, ऊंचाई:91 }} /> देखें> <पाठ इनपुट शैली ={{ऊंचाई:40, सीमा रंग:'काला', सीमा:1 }} defaultValue ="यहां कुछ टाइप करें" /> );} डिफ़ॉल्ट ऐप निर्यात करें;आउटपुट