كيف يعمل التصميم (Styling) في React Native؟

Question

Accepted Answer

يستخدم React Native **كائنات JavaScript** (وليس ملفات CSS) — يتم تطبيقها عبر prop `style`، غالباً ما يتم تنظيمها باستخدام `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 أمر أساسي لأن **التصميم ضروري لبناء أي واجهة مستخدم**، وطريقة React Native تختلف عن CSS على الويب، لذا فهي معرفة عملية ضرورية يجب معرفتها. يقوم React Native بتصميم واجهات المستخدم باستخدام **كائنات JavaScript** (عبر prop `style`، منظمة مع `StyleSheet`) بدلاً من ملفات CSS — وفهم هذا (أسماء الخصائص بصيغة camelCase مثل `backgroundColor`، وتعريف الأنماط كائنات JS، الدمج بين الأنماط باستخدام المصفوفات) ضروري لتصميم أي مكون React Native. فهم **نظام التخطيط القائم على Flexbox** مهم بشكل خاص: يستخدم React Native Flexbox للتخطيط (مثل CSS Flexbox، مع flexDirection وjustifyContent وalignItems)، لكن مع الفرق الرئيسي أن **flexDirection يأخذ القيمة الافتراضية 'column'** (وليس 'row' كما هو الحال على الويب) — وهي نقطة التباس شائعة. Flexbox هو آلية التخطيط الأساسية، لذا فهم كيفية عملها أمر أساسي لترتيب واجهات المستخدم. فهم **الاختلافات عن CSS على الويب** مهم خاصة لمطوري الويب: كائنات JS بصيغة camelCase بدلاً من ملفات/فئات CSS، قيم رقمية بدون وحدات، مجموعة فرعية من خصائص CSS (ليس كل شيء يتوفر على الويب)، القيمة الافتراضية column للـ flexbox، وعدم وجود cascade/inheritance مثل CSS (الأنماط لكل مكون) — هذه الاختلافات هي نقاط عثرة شائعة يوضحها الفهم. بينما المفاهيم تشبه CSS (مما يجعلها سهلة الفهم لمطوري الويب)، فإن البناء الجملي وبعض السلوكيات مختلفة، لذا فهم طريقة React Native المحددة ضروري. بما أن التصميم أساسي لبناء أي واجهة مستخدم وطريقة React Native القائمة على كائنات JS والـ Flexbox (مع اختلافاتها عن CSS على الويب) هي الطريقة التي يتم بها الأمر، فإن فهم التصميم في React Native معرفة عملية أساسية وضرورية — ضرورية لبناء أي واجهة React Native، ومهمة لمطوري الويب لفهم الاختلافات عن CSS، وهي مهارة أساسية يتم استخدامها باستمرار في تطوير واجهات React Native.