StyleSheet — چیست، ایجاد سبک‌ها در React Native

StyleSheet چیست؟

StyleSheet — API داخلی React Native برای تعریف سبک‌های کامپوننت‌ها. برخلاف CSS در توسعه وب، RN از اشیاء JavaScript برای توصیف سبک‌ها استفاده می‌کند. StyleSheet.create — روش کلیدی که یک شیء با سبک‌ها دریافت کرده و یک شیء با شناسه‌های عددی برمی‌گرداند.

StyleSheet بخشی از هسته React Native است و نیاز به نصب بسته‌های اضافی ندارد. طبق داده‌های متا (2026)، 95% پروژه‌های React Native از StyleSheet.create برای سبک‌های ایستا استفاده می‌کنند. جایگزین‌ها: styled-components، Emotion، NativeWind (Tailwind برای RN) — اما 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',
  },
});

// Inline style — در هر رندر یک شیء جدید ایجاد می‌کند
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

چه زمانی از درون‌خطی استفاده کنیم: برای سبک‌های پویا وابسته به حالت (pressed, selected, active). برای سبک‌های ایستا همیشه از StyleSheet.create استفاده کنید. قانون: ایستا → create، پویا → تابع درون‌خطی.

چیدمان Flexbox از طریق StyleSheet

Flexbox — تنها مکانیزم چیدمان در React Native (CSS Grid پشتیبانی نمی‌شود و float وجود ندارد). StyleSheet.create برای توصیف کانتینرهای فلکس و عناصر فرزند آنها استفاده می‌شود. ویژگی‌های اصلی: flex (ضریب پرکنندگی)، flexDirection (row | column)، justifyContent، AlignItems.

به طور پیش‌فرض flexDirection در React Native — column است (در CSS — row). این اولین چیزی است که هنگام انتقال از توسعه وب باید به خاطر بسپارید. تمام Viewها به طور پیش‌فرض کانتینرهای فلکس هستند. برای مرکز کردن یک Element از 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 همه اندازه‌ها بدون واحد تعیین می‌شوند (فقط عدد). درصدها کار می‌کنند، اما فقط برای width و height نسبت به والد. margin و padding اعداد را می‌پذیرند. برای تطبیق‌پذیری به جای درصد از flex استفاده کنید — این در صفحه‌های مختلف مطمئن‌تر است.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

API StyleSheet شامل چند روش غیر از 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') عرض و ارتفاع پنجره را برمی‌گرداند. برای به‌روزرسانی واکنشی هنگام چرخش صفحه از هوک useWindowDimensions از React Native استفاده کنید.

اگرچه StyleSheet.create مانند CSS از کوئری‌های رسانه پشتیبانی نمی‌کند، می‌توانید مقادیر را بر اساس Dimensions در داخل create محاسبه کنید یا از سبک‌های پویا از طریق تابع استفاده کنید. برای نقاط شکست، سبک‌های جداگانه برای محدوده‌های مختلف عرض ایجاد کنید.

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 برای ترکیب سبک‌های پایه و خاص. برای پروژه‌های بزرگ از Design System با تولید تم استفاده کنید.

// 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 به تم تایپ اضافه کنید.