StyleSheet — ما هو، إنشاء الأنماط في React Native

ما هو StyleSheet؟

StyleSheet — واجهة API مدمجة في React Native لتعريف أنماط المكونات. على عكس CSS في تطوير الويب، يستخدم RN كائنات JavaScript لوصف الأنماط. StyleSheet.create — الطريقة الرئيسية — تقبل كائن أنماط وتعيد كائنًا بمعرفات رقمية.

StyleSheet جزء من نواة React Native ولا يتطلب تثبيت حزم إضافية. وفقًا لـ Meta (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 — كائن يُنشأ مرة واحدة أثناء تحميل الوحدة ويُحول إلى معرف رقمي.

عند تمرير نمط مضمن، يرسل 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، ديناميكي ← دالة مضمنة.

تخطيط Flexbox مع StyleSheet

Flexbox — آلية التخطيط الوحيدة في React Native (CSS Grid غير مدعومة، float غائب). يُستخدم StyleSheet.create لوصف الحاويات المرنة وعناصرها التابعة. الخصائص الرئيسية: flex (معامل الملء)، flexDirection (row | column)، justifyContent، alignItems.

افتراضيًا، flexDirection في React Native هو 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 بدلاً من النسب المئوية — إنه أكثر موثوقية عبر الشاشات المختلفة.

واجهة 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 مفيد للفواصل والحدود — يبدو دائمًا كبكسل فيزيائي واحد بغض النظر عن كثافة الشاشة. على شاشات Retina يكون 0.5 نقطة منطقية، على العادية — نقطة واحدة. لا تستخدم hairlineWidth للعناصر التي يجب أن تكون بحجم محدد بدقة.

التخطيط المتجاوب مع Dimensions API

Dimensions API يُستخدم مع StyleSheet للتخطيط المتجاوب عبر أحجام الشاشات المختلفة. Dimensions.get('window') يعيد عرض وارتفاع النافذة. للتحديثات التفاعلية عند تدوير الشاشة، استخدم hook 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 لدمج الأنماط الأساسية والمحددة. للمشاريع الكبيرة، استخدم نظام تصميم مع توليد السمة.

// 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.