हैलो वर्ल्ड को रिएक्ट नेटिव में प्रदर्शित करने के लिए एक प्रोग्राम लिखें?

<घंटा/>

एक बार आपके सिस्टम पर ReactNative स्थापित हो जाने के बाद, आपको App.js में एक डिफ़ॉल्ट कोड इस प्रकार प्राप्त होना चाहिए -

<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; आयात {शैलीपत्रक, पाठ, दृश्य} 'प्रतिक्रिया-मूल' से; निर्यात डिफ़ॉल्ट वर्ग ऐप प्रतिक्रिया बढ़ाता है। घटक {रेंडर() {वापसी ( <शैली देखें ={styles.container}> अपने ऐप पर काम करना शुरू करने के लिए App.js खोलें! आपके द्वारा किए गए बदलाव अपने आप फिर से लोड हो जाएंगे। डेवलपर मेनू खोलने के लिए अपने फोन को हिलाएं। ); } } कास्ट स्टाइल =StyleSheet.create ({कंटेनर:{फ्लेक्स:1, बैकग्राउंड कलर:'#fff', alignItems:'center', JustifyContent:'center', },});

अब आप अपनी आवश्यकता के अनुसार कोड बदलने के लिए स्वतंत्र हैं। हम ऐप में हैलो वर्ल्ड टेक्स्ट प्रदर्शित करने के लिए यहां रुचि रखते हैं।

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

'प्रतिक्रिया' से प्रतिक्रिया आयात करें;

इसके बाद हम उन अन्य घटकों को आयात करते हैं जिनका उपयोग हम अपने कोड में हैलो वर्ल्ड टेक्स्ट प्रदर्शित करने के लिए करने जा रहे हैं।

'react-native' से आयात करें { StyleSheet, Text, View };

हमने एक स्टाइलशीट, टेक्स्ट और व्यू घटक आयात किया है। दृश्य और पाठ घटक को स्टाइल करने के लिए हमें StyleSheet घटक की आवश्यकता है। व्यू कंपोनेंट पैरेंट कंपोनेंट होगा जिसमें टेक्स्ट कंपोनेंट उसके बच्चे के रूप में होगा।

ऐप डिफ़ॉल्ट क्लास है जिसे निर्यात किया जाता है और आप प्रोजेक्ट चलाते हैं जिसे आप अपने डिवाइस पर <टेक्स्ट> घटक में टेक्स्ट देखने में सक्षम होना चाहिए जैसा कि नीचे दिखाया गया है -

निर्यात डिफॉल्ट क्लास ऐप, React.Component {रेंडर() {रिटर्न ( Open up App.js को अपने ऐप पर काम करना शुरू करने के लिए बढ़ाता है! आपके द्वारा किए गए परिवर्तन अपने आप पुनः लोड हो जाएंगे। डेवलपर मेनू खोलने के लिए अपने फ़ोन को हिलाएं। ); }}

टेक्स्ट को हैलो वर्ल्ड में बदलें जैसा कि नीचे दिखाया गया है -

निर्यात डिफॉल्ट क्लास ऐप React.Component {रेंडर() {रिटर्न ( Hello World ) का विस्तार करता है; }}

स्टाइल के प्रॉप्स को व्यू कंपोनेंट में जोड़ा जाता है। दिया गया मान Styles.container है। प्रॉप्स वैल्यू को कर्ली ब्रैकेट्स {} यानी स्टाइल ={styles.container} में देना होगा।

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

 कॉन्स्ट स्टाइल =स्टाइलशीट। क्रिएट ({कंटेनर:{फ्लेक्स:1, बैकग्राउंड कलर:'#fff', एलाइन इटम्स:'सेंटर', जस्टिफाई कंटेंट:'सेंटर',}, फॉरटेक्स्ट:{ कलर:'ग्रीन', फॉन्ट साइज:'25px'}});

यहां पूरा कोड दिया गया है जो ReactNative का उपयोग करके हैलो वर्ल्ड को आपके मोबाइल स्क्रीन पर प्रदर्शित करने में मदद करता है।

<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; आयात {शैलीपत्रक, पाठ, दृश्य} 'प्रतिक्रिया-मूल' से; निर्यात डिफ़ॉल्ट वर्ग ऐप प्रतिक्रिया बढ़ाता है। घटक {रेंडर() {वापसी ( <शैली देखें ={styles.container}> <पाठ शैली={styles.forText}>नमस्ते विश्व); } } कास्ट स्टाइल =StyleSheet.create ({कंटेनर:{फ्लेक्स:1, बैकग्राउंड कलर:'#fff', alignItems:'center', JustifyContent:'center', }, forText:{ color:'green', fontSize:' 25px'}});

आउटपुट

हैलो वर्ल्ड को रिएक्ट नेटिव में प्रदर्शित करने के लिए एक प्रोग्राम लिखें?