React Native में Hello World प्रदर्शित करने का प्रोग्राम लिखें

एक बार जब आपके सिस्टम पर React Native इंस्टॉल हो जाता है, तो आपको App.js में डिफ़ॉल्ट कोड मिलना चाहिए जैसा कि नीचे दिखाया गया है:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
    render() {
        return (
            
                Open up App.js to start working on your app!
                Changes you make will automatically reload.
                Shake your phone to open the developer menu.
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

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

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

import React from 'react';

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

import { StyleSheet, Text, View } from 'react-native';

हमने StyleSheet, Text और View कंपोनेंट इम्पोर्ट किए हैं। हमें View और Text कंपोनेंट को स्टाइल करने के लिए StyleSheet कंपोनेंट की आवश्यकता है। View कंपोनेंट पैरेंट कंपोनेंट होगा जिसके चाइल्ड के रूप में Text कंपोनेंट होगा।

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

export default class App extends React.Component {
    render() {
        return (
            
                Open up App.js to start working on your app!
                Changes you make will automatically reload.
                Shake your phone to open the developer menu.
            
        );
    }
}

टेक्स्ट को Hello World में बदलें जैसा कि नीचे दिखाया गया है:

export default class App extends React.Component {
    render() {
        return (
            
                Hello World
            
        );
    }
}

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

styles ऑब्जेक्ट StyleSheet.create() का उपयोग करके बनाया जाता है। आपके सभी कंपोनेंट्स के लिए स्टाइल StyleSheet.create() के अंदर परिभाषित किए जा सकते हैं। अभी हमने कंटेनर स्टाइल परिभाषित किया है जिसका उपयोग View कंपोनेंट पर <View style={styles.container}></View> के रूप में किया जाता है। forText वेरिएबल की स्टाइल का उपयोग Text कंपोनेंट को स्टाइल करने के लिए किया जाता है।

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    forText: {
        color: 'green',
        fontSize: '25px'
    }
});

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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
    render() {
        return (
            Hello World
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    forText: {
        color: 'green',
        fontSize: '25px'
    }
});

आउटपुट