StyleSheet — এটি কী, React Native-এ স্টাইল তৈরি

StyleSheet কী?

StyleSheet — কম্পোনেন্ট স্টাইল সংজ্ঞায়িত করার জন্য একটি অন্তর্নির্মিত React Native API। ওয়েব ডেভেলপমেন্টে CSS-এর বিপরীতে, RN স্টাইল বর্ণনা করতে JavaScript অবজেক্ট ব্যবহার করে। StyleSheet.create — মূল পদ্ধতি — একটি স্টাইল অবজেক্ট গ্রহণ করে এবং সংখ্যাসূচক শনাক্তকারী সহ একটি অবজেক্ট ফেরত দেয়।

StyleSheet React Native কোরের অংশ এবং অতিরিক্ত প্যাকেজ ইনস্টল করার প্রয়োজন নেই। Meta (2026) অনুসারে, 95% React Native প্রকল্প স্থির স্টাইলের জন্য StyleSheet.create ব্যবহার করে। বিকল্প: styled-components, Emotion, NativeWind (RN-এর জন্য Tailwind) — তবে অন্তর্নির্মিত StyleSheet কোরের জন্য মানদণ্ড রয়ে গেছে।

ইতিহাস এবং বিবর্তন

React Native (2015) এর প্রথম সংস্করণগুলিতে, স্টাইলগুলি একচেটিয়াভাবে ইনলাইন অবজেক্ট হিসাবে সংজ্ঞায়িত করা হয়েছিল। StyleSheet.create RN 0.4-এ একটি অপটিমাইজেশন হিসাবে আবির্ভূত হয়েছিল। ধারণাটি CSS থেকে নেওয়া: পঠনযোগ্যতা এবং কর্মক্ষমতার জন্য স্টাইলকে যুক্তি থেকে আলাদা করুন। বছরের পর বছর ধরে, API প্রসারিত হয়েছে: absoluteFill, hairlineWidth, flatten যুক্ত হয়েছে।

StyleSheet.create বনাম ইনলাইন স্টাইল

StyleSheet.create এবং ইনলাইন স্টাইলের মধ্যে পার্থক্য কর্মক্ষমতার জন্য গুরুত্বপূর্ণ। ইনলাইন স্টাইল একটি সাধারণ JavaScript অবজেক্ট যা কম্পোনেন্টের প্রতি রেন্ডারে তৈরি হয়। StyleSheet.create — একটি অবজেক্ট যা মডিউল লোডের সময় একবার তৈরি হয় এবং একটি সংখ্যাসূচক ID-তে রূপান্তরিত হয়।

ইনলাইন স্টাইল পাস করার সময়, React Native প্রতিবার সম্পূর্ণ অবজেক্টটি JavaScript-Native ব্রিজের মাধ্যমে পাঠায়। জটিল স্টাইলযুক্ত কম্পোনেন্টের জন্য, এর অর্থ প্রতি রেন্ডারে ডজনখানেক বৈশিষ্ট্য স্থানান্তরিত হয়। StyleSheet.create শুধুমাত্র একটি সংখ্যাসূচক শনাক্তকারী পাস করে, ব্রিজ লোড হ্রাস করে।

// StyleSheet.create — অপটিমাইজড পদ্ধতি
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// ইনলাইন স্টাইল — প্রতি রেন্ডারে একটি নতুন অবজেক্ট তৈরি করে
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

কখন ইনলাইন ব্যবহার করবেন: অবস্থার উপর নির্ভরশীল গতিশীল স্টাইলের জন্য (চাপা, নির্বাচিত, সক্রিয়)। স্থির স্টাইলের জন্য, সর্বদা StyleSheet.create ব্যবহার করুন। নিয়ম: স্থির → create, গতিশীল → ইনলাইন ফাংশন।

StyleSheet-এর সাথে Flexbox লেআউট

Flexbox — React Native-এ একমাত্র লেআউট পদ্ধতি (CSS Grid সমর্থিত নয়, float অনুপস্থিত)। StyleSheet.create ফ্লেক্স কন্টেইনার এবং তাদের চাইল্ড উপাদান বর্ণনা করতে ব্যবহৃত হয়। মূল বৈশিষ্ট্য: flex (ভরাট সহগ), flexDirection (row | column), justifyContent, alignItems।

ডিফল্টরূপে, React Native-এ flexDirection হল column (CSS-এ — row)। ওয়েব ডেভেলপমেন্ট থেকে স্যুইচ করার সময় এটি প্রথম জিনিস মনে রাখতে হবে। সমস্ত View কম্পোনেন্ট ডিফল্টরূপে ফ্লেক্স কন্টেইনার। একটি উপাদান কেন্দ্রীভূত করতে, alignItems: 'center' + justifyContent: 'center' ব্যবহার করুন।

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

গুরুত্বপূর্ণ: React Native-এ, সমস্ত আকার ইউনিট ছাড়া নির্দিষ্ট করা হয় (শুধু একটি সংখ্যা)। শতাংশ কাজ করে তবে শুধুমাত্র পিতামাতার সাপেক্ষে প্রস্থ এবং উচ্চতার জন্য। margin এবং padding সংখ্যা গ্রহণ করে। প্রতিক্রিয়াশীলতার জন্য, শতাংশের পরিবর্তে flex ব্যবহার করুন — এটি বিভিন্ন স্ক্রিনে বেশি নির্ভরযোগ্য।

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API-তে create ছাড়াও বেশ কয়েকটি পদ্ধতি রয়েছে। StyleSheet.flatten স্টাইলের একটি অ্যারে একটি অবজেক্টে একত্রিত করে — কম্পোজিশন এবং তৃতীয়-পক্ষের কম্পোনেন্টে স্টাইল পাস করার জন্য দরকারী। StyleSheet.hairlineWidth ডিভাইসে ন্যূনতম দৃশ্যমান রেখার প্রস্থ ফেরত দেয়।

StyleSheet.absoluteFill — একটি পূর্বনির্ধারিত স্টাইল { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }। ওভারলে স্তর, মোডাল উইন্ডো এবং পুরো স্ক্রিন জুড়ে সম্পূর্ণ অবস্থানের জন্য ব্যবহৃত হয়। StyleSheet.absoluteFillObject — একই তবে বর্ধিতির জন্য অবজেক্ট হিসাবে।

// flatten — স্টাইল মার্জ করুন
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — ন্যূনতম রেখা
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth বিভাজক এবং সীমানার জন্য দরকারী — এটি স্ক্রিন ঘনত্ব নির্বিশেষে সর্বদা 1 ফিজিক্যাল পিক্সেলের মতো দেখায়। Retina ডিসপ্লেতে এটি 0.5 লজিক্যাল পয়েন্ট, সাধারণ ডিসপ্লেতে — 1 পয়েন্ট। hairlineWidth এমন উপাদানের জন্য ব্যবহার করবেন না যা কঠোরভাবে নির্দিষ্ট আকারের হতে হবে।

Dimensions API-এর সাথে প্রতিক্রিয়াশীল লেআউট

Dimensions API বিভিন্ন স্ক্রিন আকারের জন্য প্রতিক্রিয়াশীল লেআউটের জন্য StyleSheet-এর সাথে ব্যবহৃত হয়। Dimensions.get('window') উইন্ডোর প্রস্থ এবং উচ্চতা ফেরত দেয়। স্ক্রিন ঘূর্ণনে প্রতিক্রিয়াশীল আপডেটের জন্য, React Native থেকে useWindowDimensions হুক ব্যবহার করুন।

যদিও StyleSheet.create CSS-এর মতো মিডিয়া কুয়েরি সমর্থন করে না, আপনি create-এর ভিতরে Dimensions-এর ভিত্তিতে মান গণনা করতে পারেন বা একটি ফাংশনের মাধ্যমে গতিশীল স্টাইল ব্যবহার করতে পারেন। ব্রেকপয়েন্টের জন্য, বিভিন্ন প্রস্থের পরিসরের জন্য পৃথক স্টাইল তৈরি করুন।

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions স্ক্রিন ঘূর্ণন এবং Split View সহ ট্যাবলেটে উইন্ডোর আকার পরিবর্তনে স্বয়ংক্রিয়ভাবে আপডেট হয়। SSR (React Native Web)-এর জন্য, নিশ্চিত করুন যে সার্ভার এবং ক্লায়েন্টের মধ্যে অসঙ্গতি এড়াতে কম্পোনেন্ট মাউন্ট করার পরে Dimensions.get কল করা হয়েছে।

প্রকল্পে স্টাইলের সংগঠন

StyleSheet সংগঠন প্রকল্পে রক্ষণাবেক্ষণযোগ্যতা এবং কোড পুনঃব্যবহারকে প্রভাবিত করে। তিনটি পদ্ধতি: কম্পোনেন্টের ভিতরে স্থানীয় স্টাইল (কম্পোনেন্টের পাশে styles.js), গ্লোবাল স্টাইল (রং, স্পেসিং, টাইপোগ্রাফি ধ্রুবক সহ theme.js), এবং কম্পোজিশনের মাধ্যমে মডিউলার স্টাইল।

প্রস্তাবিত কাঠামো: theme.js রং, আকার এবং টাইপোগ্রাফি ধ্রুবক সহ; Component.styles.js প্রতিটি কম্পোনেন্টের পাশে তার নির্দিষ্ট স্টাইলের জন্য; বেস এবং নির্দিষ্ট স্টাইল একত্রিত করার জন্য StyleSheet.flatten। বড় প্রকল্পের জন্য, থিম জেনারেশন সহ একটি ডিজাইন সিস্টেম ব্যবহার করুন।

// theme.js — গ্লোবাল ধ্রুবক
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

মডিউলার সংগঠনের সুবিধা: রং এবং স্পেসিংয়ের জন্য সত্যের একক উৎস, সরলীকৃত রিফ্যাক্টরিং (primary পরিবর্তন — সব বাটন আপডেট হয়), flatten-এর মাধ্যমে স্টাইল পুনঃব্যবহার, কোডের পঠনযোগ্যতা এবং পূর্বাভাসযোগ্যতা। TypeScript প্রকল্পের জন্য, declare module-এর মাধ্যমে থিমের জন্য টাইপ যোগ করুন।