Hello World প্রদর্শনের জন্য একটি প্রোগ্রাম লিখুন নেটিভ প্রতিক্রিয়ায়?

একবার আপনার সিস্টেমে ReactNative ইন্সটল হয়ে গেলে, আপনি App.js-এ নিম্নরূপ একটি ডিফল্ট কোড পাবেন -

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

এখন আপনি আপনার প্রয়োজন অনুযায়ী কোড পরিবর্তন করতে মুক্ত। আমরা এখানে অ্যাপটিতে Hello World লেখাটি প্রদর্শন করতে আগ্রহী।

শুরু করার জন্য আপনাকে প্রথমে প্রয়োজনীয় উপাদান এবং মডিউল আমদানি করতে হবে। আমাদের রিঅ্যাক্ট মডিউল দরকার তাই প্রথমে নিচের মত করে ইম্পোর্ট করি -

import React from 'react';

এর পরে আসুন অন্যান্য উপাদানগুলি আমদানি করি যা আমরা আমাদের কোডে Hello World টেক্সট প্রদর্শন করতে ব্যবহার করতে যাচ্ছি৷

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

আমরা একটি স্টাইলশীট, টেক্সট এবং ভিউ উপাদান আমদানি করেছি। ভিউ এবং টেক্সট কম্পোনেন্ট স্টাইল করার জন্য আমাদের StyleSheet কম্পোনেন্ট দরকার। ভিউ কম্পোনেন্ট হবে প্যারেন্ট কম্পোনেন্ট যার বাচ্চা হিসেবে টেক্সট কম্পোনেন্ট থাকবে।

অ্যাপটি হল ডিফল্ট ক্লাস যা রপ্তানি করা হয় এবং আপনি যে প্রজেক্টটি চালান তা আপনি আপনার ডিভাইসে কম্পোনেন্টে পাঠ্য দেখতে সক্ষম হবেন যেমন নীচে দেখানো হয়েছে −

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

নীচে দেখানো হিসাবে Hello World এ পাঠ্যটি পরিবর্তন করুন −

export default class App extends React.Component {
   render() {
      return (
         <View style = {styles.container}>
            <Text>Hello World</Text>
         </View>
      );
   }
}

স্টাইল এর প্রপস ভিউ কম্পোনেন্টে যোগ করা হয়েছে। প্রদত্ত মান হল styles.container. প্রপস মানটি কোঁকড়া বন্ধনীতে দিতে হবে {} অর্থাৎ style={styles.container}।

StyleSheet.create() ব্যবহার করে স্টাইল অবজেক্ট তৈরি করা হয়। উপাদানগুলির জন্য আপনার সমস্ত স্টাইল StyleSheet.create() এর মধ্যে সংজ্ঞায়িত করা যেতে পারে। এই মুহূর্তে আমরা কন্টেইনার স্টাইলকে সংজ্ঞায়িত করেছি যা ভিউ কম্পোনেন্টে হিসেবে ব্যবহৃত হয়। টেক্সট ভেরিয়েবলের স্টাইলটি টেক্সট কম্পোনেন্ট স্টাইল করতে ব্যবহৃত হয়।

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

ReactNative ব্যবহার করে আপনার মোবাইল স্ক্রীনে Hello World প্রদর্শন করতে সাহায্য করে এমন সম্পূর্ণ কোড এখানে রয়েছে৷

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

আউটপুট