React Native-এ সবচেয়ে গুরুত্বপূর্ণ কোর কম্পোনেন্টগুলো নিচে দেওয়া হলো:
| React Native কম্পোনেন্ট | Android নেটিভ ভিউ | iOS নেটিভ ভিউ | ওয়েব ব্রাউজার | বিবরণ |
|---|---|---|---|---|
| View - <View> | অ্যান্ড্রয়েড ডিভাইসে অ্যাপ দেখার সময় <View> কম্পোনেন্ট <ViewGroup>-এ পরিবর্তন হয় | iOS ডিভাইসে অ্যাপ দেখার সময় <View> কম্পোনেন্ট <UIView>-এ পরিবর্তন হয় | ওয়েব ব্রাউজারে দেখার সময় <View> কম্পোনেন্ট <div> ট্যাগে পরিবর্তন হয় | ফ্লেক্সবক্স লেআউট সাপোর্ট করার মূল কন্টেইনার। টাচ হ্যান্ডলিংও ম্যানেজ করে। |
| Text - <Text> | অ্যান্ড্রয়েড ডিভাইসে <Text> কম্পোনেন্ট <TextView>-এ পরিবর্তন হয় | iOS ডিভাইসে <Text> কম্পোনেন্ট <UITextView>-এ পরিবর্তন হয় | ওয়েব ব্রাউজারে <Text> কম্পোনেন্ট <p> ট্যাগে পরিবর্তন হয় | ইউজারকে টেক্সট দেখাতে ব্যবহৃত হয়। স্টাইলিং এবং টাচ ইভেন্টও হ্যান্ডল করে। |
| Image - <Image> | অ্যান্ড্রয়েড ডিভাইসে <Image> কম্পোনেন্ট <ImageView>-এ পরিবর্তন হয় | iOS ডিভাইসে <Image> কম্পোনেন্ট <UIImageView>-এ পরিবর্তন হয় | ওয়েব ব্রাউজারে <Image> কম্পোনেন্ট <img> ট্যাগে পরিবর্তন হয় | ইমেজ ডিসপ্লে করতে ব্যবহৃত হয়। |
| ScrollView - <ScrollView> | অ্যান্ড্রয়েড ডিভাইসে <ScrollView> কম্পোনেন্ট <ScrollView>-এ পরিবর্তন হয় | iOS ডিভাইসে <ScrollView> কম্পোনেন্ট <UIScrollView>-এ পরিবর্তন হয় | ওয়েব ব্রাউজারে <ScrollView> কম্পোনেন্ট <div> ট্যাগে পরিবর্তন হয় | কম্পোনেন্ট এবং ভিউ ধারণকারী একটি স্ক্রোলিং কন্টেইনার। |
| TextInput - <TextInput> | অ্যান্ড্রয়েড ডিভাইসে <TextInput> কম্পোনেন্ট <EditText>-এ পরিবর্তন হয় | iOS ডিভাইসে <TextInput> কম্পোনেন্ট <UITextField>-এ পরিবর্তন হয় | ওয়েব ব্রাউজারে <TextInput> কম্পোনেন্ট <input type="text"> ট্যাগে পরিবর্তন হয় | ইনপুট এলিমেন্ট যেখানে ইউজার টেক্সট লিখতে পারে। |
উদাহরণ
<View>, <Text>, <Image>, <ScrollView> এবং <TextInput> সহ একটি ওয়ার্কিং উদাহরণ:
Text, View, Image, ScrollView, TextInput-এ কাজ করতে হলে কম্পোনেন্টগুলো react-native-এ থেকে ইম্পোর্ট করুন নিচের মতো:
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
View কম্পোনেন্ট মূলত টেক্সট, বাটন, ইমেজ ইত্যাদি ধারণ করতে ব্যবহৃত হয়। কম্পোনেন্টটি নিচের মতো ব্যবহার করা হয়:
Inside View Container
এতে Text এবং Image কম্পোনেন্ট রয়েছে। ScrollView কম্পোনেন্ট একটি প্যারেন্ট কম্পোনেন্ট처럼 আচরণ করে যা View, Text, Image, Button এবং অন্যান্য React Native কম্পোনেন্ট হ্যান্ডল করে।
import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
const App = () => {
return (
Welcome to TutorialsPoints!
Inside View Container
);
}
export default App;
আউটপুট
