Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

रिएक्ट नेटिव के महत्वपूर्ण मुख्य घटकों की सूची बनाएं

<घंटा/>

रिएक्ट नेटिव में सबसे महत्वपूर्ण मुख्य घटक इस प्रकार हैं -

<थ>विवरण
प्रतिक्रिया मूल घटक एंड्रॉइड नेटिव व्यू आईओएस नेटिव व्यू वेब ब्राउज़र
देखें - <देखें> जब ऐप को 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 ="यहां कुछ टाइप करें" /> );} डिफ़ॉल्ट ऐप निर्यात करें;

आउटपुट

रिएक्ट नेटिव के महत्वपूर्ण मुख्य घटकों की सूची बनाएं


  1. सेक्शनलिस्ट घटक क्या है और रिएक्ट नेटिव में इसका उपयोग कैसे करें?

    एक इंटरफ़ेस जो सूचियों को अनुभागों में प्रस्तुत करने में मदद करता है। सेक्शनलिस्ट की कुछ महत्वपूर्ण विशेषताएं हैं - सूची में शीर्षलेख/पाद लेख समर्थन अनुभाग के लिए शीर्षलेख/पाद लेख समर्थन स्क्रॉल लोड हो रहा है ताज़ा करने के लिए खींचें पूरी तरह से क्रॉस-प्लेटफ़ॉर्म मूल अनुभागसूची घटक इस प्रकार दिखत

  1. रिएक्ट नेटिव में एनिमेशन की कार्यप्रणाली के बारे में बताएं?

    रिएक्ट नेटिव एक एनिमेशन घटक प्रदान करता है जो उपलब्ध घटकों में अधिक अन्तरक्रियाशीलता जोड़ने में मदद करता है। एनीमेशन घटक का उपयोग दृश्य, पाठ, छवि, स्क्रॉलव्यू, फ्लैटलिस्ट और सेक्शनलिस्ट को चेतन करने के लिए किया जा सकता है। रिएक्ट नेटिव दो प्रकार के एनिमेशन प्रदान करता है - एनिमेटेड एपीआई लेआउटएनीम

  1. कैसे त्रुटि को संभालने के लिए "पाठ तार एक <पाठ> घटक के भीतर प्रदान किया जाना चाहिए" ReactNative में?

    अपना ऐप विकसित करते समय आप ऊपर बताए अनुसार त्रुटि का सामना कर सकते हैं। यहाँ वह कोड है जो त्रुटि देता है - उदाहरण प्रतिक्रिया से आयात प्रतिक्रिया; प्रतिक्रिया-मूल से आयात {छवि, पाठ, दृश्य, स्टाइलशीट}; निर्यात डिफ़ॉल्ट वर्ग ऐप प्रतिक्रिया बढ़ाता है। घटक {रेंडर () {वापसी ( ); }}कॉन्स्ट स्टाइल =स्टा