لماذا يعتبر StyleSheet.create مفضلاً على استخدام Inline Styles المباشرة؟

الإجابة المختصرة

لأنه يتحقق من صحة أسماء وقيم التنسيقات عند الإنشاء، ويوفر أمان الأنواع في TypeScript، ويرسل التنسيقات مرة واحدة عبر الذاكرة الأصلية لربطها بمعرفات رقمية ثابتة (IDs) بدلاً من إنشاء كائنات جديدة في كل دورة تصيير.

الشرح

كتابة style={{ padding: 16 }} مباشرة داخل JSX تؤدي إلى إنشاء كائن JavaScript جديد تماماً في كل مرة يتم فيها تصيير المكون. هذا يثقل عمل الـ Garbage Collector ويفشل مقارنة الفحص السطحي للـ Props. يضمن StyleSheet.create تجميع التنسيقات وثبات مراجعها وتسهيل قراءتها وتنظيمها خارج الـ JSX.

مثال بالكود

import { StyleSheet, View } from 'react-native';

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#fff',
  }
});

function Card() {
  return <View style={styles.card} />;
}

أخطاء شائعة

• إعادة إنشاء StyleSheet.create داخل جسم دالة المكون بدلاً من وضعها خارج نطاق الدالة في أسفل الملف.

أسئلة متابعة

• ما هي الفروقات الرئيسية بين CSS على المتصفح ونظام التنسيق في React Native؟

المصادر

• React Native docs — StyleSheet