React Native-এ স্টাইলিং কীভাবে কাজ করে?

Question

Accepted Answer

React Native স্টাইলিং **JavaScript অবজেক্ট** ব্যবহার করে (CSS ফাইল নয়) — `style` prop-এর মাধ্যমে প্রয়োগ করা হয়, প্রায়শই `StyleSheet`-এর সাথে সংগঠিত। এটি একটি **Flexbox-ভিত্তিক** লেআউট সিস্টেম ব্যবহার করে। ধারণাগুলি CSS-এর মতো কিন্তু JavaScript সিনট্যাক্স এবং কিছু পার্থক্য সহ। ## JavaScript অবজেক্টের সাথে স্টাইলিং ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — define styles as JS objects (camelCase properties) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (not background-color) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` স্টাইলগুলি **JavaScript অবজেক্ট** যা **camelCase** প্রপার্টি নাম সহ (`backgroundColor`, `background-color` নয়); `StyleSheet.create` সেগুলি সংগঠিত করে। আপনি ইনলাইন অবজেক্ট বা স্টাইলের অ্যারেও পাস করতে পারেন। ## Flexbox লেআউট (ডিফল্ট) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## ওয়েব CSS থেকে পার্থক্য ```text ✓ JS objects, camelCase props; no CSS files/classes; values often unitless numbers ✓ FLEXBOX by default (flexDirection defaults to 'column', unlike web's 'row') ✓ A subset of CSS properties (not everything web CSS has); some RN-specific behavior ✓ No cascade/inheritance like CSS (styles are per-component); use style arrays to combine ``` ## এটি কেন গুরুত্বপূর্ণ React Native-এ স্টাইলিং বোঝা মৌলিক কারণ **স্টাইলিং যেকোনো UI তৈরির জন্য প্রয়োজনীয়**, এবং React Native-এর পদ্ধতি ওয়েব CSS থেকে আলাদা, তাই এটি অবশ্যই জানতে হবে এমন ব্যবহারিক জ্ঞান। React Native UI-গুলি **JavaScript অবজেক্ট**-এর সাথে স্টাইল করে (`style` prop-এর মাধ্যমে, `StyleSheet`-এর সাথে সংগঠিত) CSS ফাইলের পরিবর্তে — এবং এটি বোঝা (`backgroundColor`-এর মতো camelCase প্রপার্টি নাম, স্টাইলগুলি JS অবজেক্ট হিসাবে সংজ্ঞায়িত করা, অ্যারের সাথে স্টাইলগুলি একত্রিত করা) যেকোনো React Native কম্পোনেন্ট স্টাইল করার জন্য প্রয়োজনীয়। **Flexbox-ভিত্তিক লেআউট সিস্টেম** বোঝা বিশেষভাবে গুরুত্বপূর্ণ: React Native Flexbox ব্যবহার করে লেআউটের জন্য (CSS Flexbox-এর মতো, flexDirection, justifyContent, alignItems সহ), কিন্তু মূল পার্থক্য যে **flexDirection ডিফল্টরূপে 'column'** এ সেট ('row' নয় ওয়েবে) — বিভ্রান্তির একটি সাধারণ পয়েন্ট। Felxbox প্রাথমিক লেআউট মেকানিজম, তাই এটি বোঝা UI ব্যবস্থার জন্য প্রয়োজনীয়। **ওয়েব CSS থেকে পার্থক্য** বোঝা গুরুত্বপূর্ণ বিশেষত ওয়েব ডেভেলপারদের জন্য: CSS ফাইল/ক্লাসের পরিবর্তে camelCase সহ JS অবজেক্ট, ইউনিটবিহীন সংখ্যার মান, CSS প্রপার্টিগুলির একটি সাবসেট (ওয়েবে যা কিছু আছে সবকিছু নয়), কলাম-ডিফল্ট flexbox, এবং CSS-এর মতো ক্যাসকেড/ইনহেরিটেন্স নেই (স্টাইলগুলি প্রতি-কম্পোনেন্ট) — এই পার্থক্যগুলি সাধারণ বাধা যা বোঝা স্পষ্ট করে। ধারণাগুলি CSS-এর মতো (ওয়েব ডেভেলপারদের জন্য এটি সহজবোধ্য করে তোলে), সিনট্যাক্স এবং কিছু আচরণ আলাদা, তাই React Native-এর নির্দিষ্ট পদ্ধতি বোঝা প্রয়োজনীয়। স্টাইলিং যেকোনো UI তৈরির জন্য প্রয়োজনীয় এবং React Native-এর JS-অবজেক্ট, Flexbox-ভিত্তিক পদ্ধতি (ওয়েব CSS থেকে এর পার্থক্য সহ) কীভাবে এটি করা হয় তা হল, React Native-এ স্টাইলিং বোঝা প্রয়োজনীয়, মৌলিক ব্যবহারিক জ্ঞান — যেকোনো React Native ইন্টারফেস তৈরির জন্য প্রয়োজনীয়, এবং ওয়েব ডেভেলপারদের জন্য CSS থেকে পার্থক্য বোঝা গুরুত্বপূর্ণ, React Native UI ডেভেলপমেন্টে ক্রমাগত ব্যবহৃত একটি মূল দক্ষতা।