في أول مرة تنسّق فيها شاشة في React Native، ستمدّ يدك إلى أشياء غير موجودة: اسم class، و:hover، وmedia query، وfont-family على body ليرثه كل شيء. لا يملك React Native أيًّا منها. ما يملكه بدلًا من ذلك أصغر وأكثر قابلية للتوقّع: كائنات عادية، تُطبَّق مباشرة على الـ component الذي يحتاج إليها، بترتيب تتحكّم فيه أنت.
التنسيق (style) كائن JavaScript بمفاتيح camelCase. يمكنك تمريره مباشرة، لكن معظم الكود يجمع التنسيقات باستخدام StyleSheet.create، الذي يمنحك الإكمال التلقائي وفحص الأنواع ومكانًا واحدًا تقرأ فيه تنسيقات الـ component:
import { StyleSheet, Text, View } from 'react-native';\n\nexport function HikeCard({ name, distanceKm }: { name: string; distanceKm: number }) {\n return (\n <View style={styles.card}>\n <Text style={styles.title}>{name}</Text>\n <Text style={styles.meta}>{distanceKm} km</Text>\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n card: {\n backgroundColor: '#ffffff',\n borderRadius: 12,\n paddingVertical: 12,\n paddingHorizontal: 16,\n borderWidth: 1,\n borderColor: '#e2e8e4',\n },\n title: { fontSize: 18, fontWeight: '600', color: '#1d2a22' },\n meta: { fontSize: 14, color: '#5c6b62', marginTop: 4 },\n});تعريف styles أسفل الـ component عُرف متّبع، وهو عُرف جيد: الـ JSX يأتي أولًا حين تفتح الملف.
هل StyleSheet.create أسرع من الكائنات المباشرة (inline)؟ ليس بأي قدر ستقيسه اليوم. الكلفة الحقيقية للكائنات المباشرة هي سهولة القراءة، وإنشاء كائنات جديدة في كل render، وهذا لا يهمّ إلا حين تمرّر التنسيقات إلى أبناء مغلّفين بـ memo. القاعدة المعقولة: التنسيقات الثابتة في StyleSheet.create، والقيم القليلة التي تعتمد على الـ props أو الـ state تُكتب مباشرة أو في مصفوفة التنسيق بجوارها.
borderRadius: 12 تعني 12 نقطة مستقلّة عن الكثافة (density-independent points)، لا 12 بكسلًا فعليًا. الزاوية ذات الـ 12 نقطة تبدو بالحجم نفسه على هاتف Android رخيص وعلى iPhone بكثافة بكسلات أعلى بثلاث مرات؛ فالمنصّة تتولّى الضرب نيابةً عنك. النسب المئوية تعمل كنصوص (width: '50%')، وهذا كل شيء: لا px ولا rem ولا em ولا vh.
والاختصارات التي تأخذ عدّة قيم غير موجودة أيضًا. بدلًا من margin: '8px 16px' تكتب marginVertical: 8, marginHorizontal: 16. والنمط نفسه يشمل الحشو (paddingTop، paddingHorizontal)، والحدود (borderTopWidth، borderBottomColor)، والزوايا (borderTopLeftRadius). أما الاختصارات ذات القيمة الواحدة مثل margin: 8 وborderRadius: 12 فتعمل كما تتوقّع.
يدعم React Native الحديث أيضًا عدّة خصائص يفتقدها مطوّرو الويب: gap وrowGap وcolumnGap للمسافات بين الأبناء، وboxShadow بنصّ يشبه CSS، وfilter. أما الدروس القديمة فتستخدم props منفصلة هي shadowColor/shadowOffset لـ iOS وelevation لـ Android، وما زلت ستراها في قواعد الكود الموجودة.
يقبل الـ prop المسمّى style مصفوفة. يدمجها React Native من اليسار إلى اليمين، فتفوز المفاتيح اللاحقة، وتُتخطّى القيم الزائفة (false وnull وundefined). وهذا يحوّل التنسيق الشرطي إلى سطر واحد:
<View style={[styles.card, isFavorite && styles.favorite, isSelected && styles.selected]} />لا توجد specificity تفكّر فيها، ولا !important، ولا تنسيق يصل من أب على بُعد ثلاثة ملفات. إن بدت بطاقة خاطئة، فالسبب في تلك المصفوفة.
استخدم القاعدة نفسها لتجعل الـ components الخاصة بك قابلة للتعديل. اقبل prop باسم style وضعه في الآخر:
import type { StyleProp, ViewStyle } from 'react-native';\n\ntype Props = { name: string; distanceKm: number; style?: StyleProp<ViewStyle> };\n\nexport function HikeCard({ name, distanceKm, style }: Props) {\n return (\n <View style={[styles.card, style]}>\n {/* …title and meta as before */}\n </View>\n );\n}\n\n// A caller nudges one instance without forking the component:\n<HikeCard name=\"Ridge Loop\" distanceKm={8.4} style={{ marginBottom: 24 }} />StyleProp<ViewStyle> هو الـ type الذي يقبل كائنًا أو مصفوفة أو قيمة زائفة، تمامًا مثل الـ components المدمجة.
دون وراثة، يأتي الاتساق من مكانين: الـ components (بطاقة HikeCard واحدة، وزر PrimaryButton واحد، وAppText واحد)، وملف صغير من الـ tokens (قيم التصميم المشتركة) تستورده كلها.
export const colors = {\n bg: '#f6f8f6',\n surface: '#ffffff',\n text: '#1d2a22',\n textMuted: '#5c6b62',\n primary: '#2f6f4e',\n border: '#e2e8e4',\n};\n\nexport const space = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 };\nexport const radius = { sm: 8, md: 12, lg: 20 };الآن تقرأ البطاقة borderRadius: radius.md وpaddingHorizontal: space.lg، وأي تغيير من المصمّم يقع في ملف واحد.
في تطبيق ويب كبير، تأتي أصعب أخطاء التنسيق من قواعد لم تكتبها تصل إلى عناصر لم تتوقّعها. يُلغي React Native هذه الفئة كلها. شكل الـ component هو تنسيقه الخاص زائد ما يمرّره له من يستخدمه، ولا شيء غير ذلك. هذا يعني كتابة أكثر في البداية، وتصحيح أخطاء أقل بكثير لاحقًا. والفرق التي تريد سهولة تشبه الـ classes تضيف مكتبة مثل NativeWind (classes من Tailwind تُترجَم إلى كائنات تنسيق)، لكنها في الأسفل تبقى الكائنات نفسها.
\nفي الدرس التالي سترتّب هذه الصناديق المنسّقة باستخدام flexbox، حيث تختلف القيم الافتراضية في React Native عن الويب بطرق تفسّر معظم لحظات «لماذا هذا العنصر منضغط؟».
\n","toc":[{"id":"sec-1","text":"كائنات التنسيق وStyleSheet.create","level":2},{"id":"sec-2","text":"أرقام بلا وحدات","level":2},{"id":"sec-3","text":"مصفوفات التنسيق: الترتيب هو القاعدة الوحيدة","level":2},{"id":"sec-4","text":"الـ tokens بدلًا من الـ cascade","level":2},{"id":"sec-5","text":"لماذا غياب الـ cascade ميزة","level":2}],"takeaways":["التنسيقات كائنات JavaScript بمفاتيح camelCase وأرقام بلا وحدات، تُقاس بنقاط مستقلّة عن كثافة البكسلات.","اختصارات CSS متعدّدة القيم، مثلmargin '8px 16px'، غير موجودة؛ استخدم marginVertical وmarginHorizontal.","في مصفوفة التنسيق تفوز العناصر اللاحقة وتُتخطّى القيم الزائفة (falsy)، وهذا يجعل التنسيق الشرطي سطرًا واحدًا.","إعادة الاستخدام تتم عبر الـ components وكائن من الـ tokens، لا عبر الـ selectors أو ملف تنسيق عام.","اقبل prop باسم style وضعه في آخر المصفوفة، ليتمكّن من يستخدم الـ component من تعديله دون نسخه."],"further":[{"title":"Style","url":"https://reactnative.dev/docs/style"},{"title":"StyleSheet","url":"https://reactnative.dev/docs/stylesheet"},{"title":"useColorScheme","url":"https://reactnative.dev/docs/usecolorscheme"}],"quiz":[{"q":"ما الذي يُرسَم مع style={[styles.card, isFavorite && styles.favorite, { padding: 8 }]} حين تكون isFavorite تساوي false وكلا التنسيقين يضبط padding؟
false ليست تنسيقًا صالحًا.","why":"القيم الزائفة في مصفوفة التنسيق تُتخطّى عمدًا؛ وهذا ما يجعل نمط && آمنًا هنا."},{"text":"الحشو الخاص بـ styles.card، لأن العنصر الأول له الأولوية.","why":"الأولوية في الاتجاه المعاكس. العناصر اللاحقة تتغلّب على السابقة، مثل Object.assign."},{"text":"الحشو الخاص بـ styles.favorite، لأن التنسيقات المسمّاة تتغلّب على الكائنات المباشرة.","why":"لا توجد أولوية تحديد (specificity) في React Native. الترتيب هو القاعدة الوحيدة، وfavorite تُخطّي على أي حال."},{"text":"حشو قيمته 8، لأن العنصر الأخير في المصفوفة هو الذي يفوز.","why":"صحيح. تُتجاهَل false، ويأتي الكائن المباشر أخيرًا، فيتغلّب الـ padding الخاص به على حشو البطاقة."}],"answer":3},{"q":"أيّ كائن تنسيق صالح في React Native؟
","options":[{"text":"{ margin: '8px 16px', fontSize: '16px' }","why":"الاختصارات متعدّدة القيم ونصوص px من صياغة CSS. أما React Native فيريد رقمًا واحدًا لكل خاصية."},{"text":"{ marginVertical: 8, marginHorizontal: 16, fontSize: 16 }","why":"صحيح. مفاتيح مفصّلة بأرقام بلا وحدات، تُقاس بالنقاط."},{"text":"{ 'margin-vertical': 8, 'font-size': 16 }","why":"المفاتيح أسماء خصائص JavaScript بصيغة camelCase، لا أسماء CSS بصيغة kebab-case."}],"answer":1},{"q":"يحتاج Trailhead أن تستخدم كل البطاقات نصف قطر الزوايا والمسافات نفسها. ما الطريقة المعتادة؟
","options":[{"text":"ملفtheme.ts يصدّر tokens (الألوان، المسافات، نصف القطر) تستوردها الـ components داخل الـ StyleSheets الخاصة بها.","why":"صحيح. الـ tokens تعطيك مصدرًا واحدًا للحقيقة دون حاجة إلى cascade، ومن السهل تبديلها للوضع الداكن."},{"text":"ملف تنسيق عام يُحمَّل في الـ root layout ويستهدف كل View.","why":"لا توجد selectors في React Native، فلا شيء يستطيع استهداف «كل View»."},{"text":"نسخ الأرقام في كل component والحفاظ على تطابقها بالبحث والاستبدال.","why":"ينجح هذا حتى يغيّر المصمّم نصف القطر من 12 إلى 14 في أربعين ملفًا."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Merge a React Native style value into one plain object.\n// A style can be an object, a falsy value, or an array of styles (arrays can nest).\nfunction flattenStyle(style) {\n if (Array.isArray(style)) {\n return Object.assign(style[0], ...style.slice(1));\n }\n return style;\n}\n\nconst card = { padding: 12, borderRadius: 12 };\nconsole.log(flattenStyle([card, false, { padding: 8 }]));\n"},"solution":{"js":"function flattenStyle(style) {\n if (!style) return {};\n if (!Array.isArray(style)) return { ...style };\n const result = {};\n for (const entry of style) {\n Object.assign(result, flattenStyle(entry));\n }\n return result;\n}\n\nconst card = { padding: 12, borderRadius: 12 };\nconsole.log(flattenStyle([card, false, { padding: 8 }]));\n"},"checks":[{"id":"single-object","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return typeof flattenStyle === 'function' && eq(flattenStyle({ padding: 4 }), { padding: 4 });"},{"id":"later-wins","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return eq(flattenStyle([{ padding: 12, color: 'green' }, { padding: 8 }]), { padding: 8, color: 'green' });"},{"id":"skips-falsy","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return eq(flattenStyle([{ a: 1 }, false, null, undefined, { b: 2 }]), { a: 1, b: 2 });"},{"id":"nested-arrays","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return eq(flattenStyle([{ a: 1 }, [{ b: 2 }, [false, { a: 3 }]]]), { a: 3, b: 2 });"},{"id":"no-mutation","test":"const base = { padding: 12 }; const extra = { padding: 8 }; flattenStyle([base, extra]); flattenStyle(base).padding = 99; return base.padding === 12 && extra.padding === 8;"},{"id":"falsy-input","test":"const eq = (a, b) => a !== null && typeof a === 'object' && JSON.stringify(Object.entries(a).sort()) === JSON.stringify(Object.entries(b).sort()); return eq(flattenStyle(null), {}) && eq(flattenStyle(false), {}) && eq(flattenStyle([]), {});"}],"title":"اكتب دالة دمج التنسيقات بنفسك","prompt":"يدمج React Native الـ prop المسمّى style بالطريقة نفسها في كل مرة: تُقرأ المصفوفات من اليسار إلى اليمين، وتفوز المفاتيح اللاحقة، وتُتخطّى القيم الزائفة، ويمكن أن تتداخل المصفوفات. اكتب flattenStyle(style) بحيث تتّبع هذه القواعد وتُرجع كائنًا عاديًا جديدًا واحدًا.
false أو null أو undefined) أو المصفوفة الفارغة تُرجع {}.الكود المبدئي قريب من الحل لكن فيه ثلاثة أخطاء. اعثر عليها.
\n","hints":["Object.assign(style[0], …) يكتب داخل الكائن الأول. ماذا يحدث لـ styles.card المشترك في المرة التالية التي يُستخدم فيها؟","تعامل مع الحالات البسيطة أولًا: المدخل الزائف يُرجع {}، والكائن الذي ليس مصفوفة يُرجع { ...style }.","للمصفوفات، ابدأ بـ const result = {} ثم Object.assign(result, flattenStyle(entry)) لكل عنصر؛ والاستدعاء التعاودي يتكفّل بالتداخل وبالقيم الزائفة."],"explanation":"الحل تعاودي (recursive): كل عنصر يُسطَّح وحده، وهذا يعالج المصفوفات المتداخلة والقيم الزائفة بحالتَي الأساس نفسيهما، ثم يُدمَج في كائن جديد فلا تُمَسّ تنسيقات المستدعي أبدًا. تعديل style[0] هو الخطأ الخطير: styles.card مشترك بين كل البطاقات، فبطاقة مفضّلة واحدة ستغيّرها كلها بصمت. هذا هو العقد نفسه الذي يتبعه StyleSheet.flatten، ومعرفته تتيح لك التنبّؤ بالضبط بما ستعرضه أي مصفوفة تنسيق.