هذا خطأ تخطيط يواجهه كل مطوّر ويب في أسبوعه الأول مع React Native: صفّ فيه أيقونة وعنوان وسهم يبدو مثاليًا مع “Ridge Loop”، وينكسر مع “Old Mill Creek Trail to Eagle Point Lookout”. يختفي السهم خلف الحافة اليمنى. لا عيب في معرفتك بالـ flexbox؛ كل ما في الأمر أن flexbox في React Native يبدأ من قيم افتراضية مختلفة.
\nيرتّب React Native كل View باستخدام flexbox (عبر Yoga، محرّك تخطيط يطبّق المواصفة). لا يوجد display: block ولا inline؛ فكل View حاوية flex. أربع قيم افتراضية تختلف عن الويب:
| الخاصية | \nالافتراضي على الويب | \nالافتراضي في React Native | \n
|---|---|---|
flexDirection | \nrow | \ncolumn | \n
flexShrink | \n1 | \n0 | \n
alignContent | \nnormal | \nflex-start | \n
flex | \nاختصار لعدّة خصائص | \nرقم واحد | \n
أول اثنتين تفسّران معظم المفاجآت. الأبناء يتكدّسون عموديًا ما لم تقل flexDirection: 'row'، ولا ينكمشون حين تنفد المساحة، ولهذا دفع ذلك العنوان الطويل السهمَ بعيدًا.
القواعد التي تعرفها ما زالت سارية: justifyContent يعمل على المحور الرئيسي، وalignItems على المحور العرضي. في العمود (الافتراضي)، يوسّط justifyContent: 'center' عموديًا، ويوسّط alignItems: 'center' أفقيًا. انتقل إلى صف فتتبادل الخاصيتان دوريهما.
القيمة الافتراضية لـ alignItems هي stretch، فالابن في عمود يملأ العرض كاملًا ما لم تعطه عرضًا أو تغيّر alignItems. ولهذا يمتد Text له لون خلفية في عمود عادي من الحافة إلى الحافة.
في React Native، يأخذ flex رقمًا واحدًا. وflex: 1 تعني «اكبر لتملأ المساحة المتبقية على المحور الرئيسي، ويُسمح لك بالانكماش». مكانان لا يكادان يستغنيان عنها أبدًا:
حين تظهر الشاشة كشريط رفيع في الأعلى، أو حين لا تتمرّر قائمة، اصعد في الشجرة وابحث عن الـ flex: 1 المفقود.
هذا هو الصف الذي انكسر، بعد إصلاحه:
\nimport { Image, StyleSheet, Text, View } from 'react-native';\n\nexport function HikeRow({ hike }: { hike: { name: string; distanceKm: number; date: string; thumbUrl: string } }) {\n return (\n <View style={styles.row}>\n <Image source={{ uri: hike.thumbUrl }} style={styles.thumb} />\n <View style={styles.body}>\n <Text style={styles.title} numberOfLines={1}>{hike.name}</Text>\n <Text style={styles.meta}>{hike.distanceKm} km · {hike.date}</Text>\n </View>\n <Text style={styles.chevron}>›</Text>\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n row: { flexDirection: 'row', alignItems: 'center', gap: 12, padding: 12 },\n thumb: { width: 56, height: 56, borderRadius: 8 },\n body: { flex: 1 },\n title: { fontSize: 17, fontWeight: '600' },\n meta: { fontSize: 14, color: '#5c6b62', marginTop: 2 },\n chevron: { fontSize: 24, color: '#9aa79f' },\n});اقرأه محورًا محورًا. المحور الرئيسي للصف أفقي؛ وalignItems: 'center' يوسّط الأبناء الثلاثة عموديًا بالنسبة إلى أطولهم (الصورة المصغّرة). للصورة المصغّرة والسهم أحجام ثابتة. أما الجسم فعليه flex: 1، فيأخذ أي عرض يتبقّى، وnumberOfLines={1} يقتطع الاسم الطويل بعلامة حذف بدلًا من دفع السهم خارج الشاشة.
أداتان أخريان تُكملان التخطيط اليومي. يسمح alignSelf لابن واحد بالخروج عن alignItems الخاصة بأبيه: زرّ “Log a hike” في عمود متمدّد يمكنه استخدام alignSelf: 'flex-end' ليستقرّ على اليمين بعرضه الطبيعي. أما aspectRatio فيحدّد حجم الصندوق انطلاقًا من بُعد واحد، وهذا مثالي للصور: أعطِ صورة الدرب width: '100%' وaspectRatio: 4 / 3، فيتبع ارتفاعها عرض الشاشة على كل هاتف دون أن تحسب أي شيء.
وحين يسيء تخطيطٌ التصرّف، تبقى أسرع حيلة لتصحيحه هي الأقدم: أعطِ الـ Views المشتبه بها لون خلفية فاقعًا مؤقتًا. سترى فورًا أي صندوق أصغر من اللازم، وأيها تمدّد، وأيها لم يحصل قط على flex: 1.
كل View يكون position: 'relative' افتراضيًا، لذا يضع position: 'absolute' الابن بالنسبة إلى أبيه. هكذا تضع شارة “New” على زاوية صورة مصغّرة:
<View>\n <Image source={{ uri: hike.thumbUrl }} style={styles.thumb} />\n <View style={{ position: 'absolute', top: -4, right: -4, backgroundColor: '#e8590c', borderRadius: 8, paddingHorizontal: 6 }}>\n <Text style={{ color: 'white', fontSize: 11, fontWeight: '700' }}>NEW</Text>\n </View>\n</View>ولصفّ من الوسوم (“steep”، “lake”، “dog-friendly”) يجب أن ينتقل إلى سطر ثانٍ حين تنفد المساحة، اجمع بين flexDirection: 'row' وflexWrap: 'wrap' وgap: 8. التموضع المطلق يُخرج الابن من تدفّق الـ flex كليًا، لذا استخدمه للعناصر العائمة فقط، ولا تستخدمه أبدًا لتزييف تخطيط يستطيع الـ flex التعبير عنه.
في الدرس التالي ستجعل هذه التخطيطات تصمد أمام أحجام الهواتف المختلفة، والنتوءات (notches)، والزوايا المستديرة، والفروق بين المنصّتين.
\n","toc":[{"id":"sec-1","text":"الـ flexbox نفسه، بقيم افتراضية مختلفة","level":2},{"id":"sec-2","text":"flex: 1، الخاصية التي ستكتبها أكثر من غيرها","level":2},{"id":"sec-3","text":"بناء صفّ الرحلة","level":2},{"id":"sec-4","text":"التموضع المطلق والالتفاف","level":2}],"takeaways":["كل View حاوية flex، والمحور الرئيسي يمتد من الأعلى إلى الأسفل افتراضيًا (flexDirection: 'column').","justifyContent يحدّد مواضع الأبناء على المحور الرئيسي؛ وalignItems يحدّدها على المحور العرضي، وقيمته الافتراضية stretch.","الأبناء لا ينكمشون افتراضيًا في React Native، لذا يدفع العنوان الطويل إخوته خارج الشاشة حتى تعطيه flex: 1.","flex: 1 تعني «خذ المساحة المتبقية»؛ والـ View الجذري في كل شاشة وكل أب لـ ScrollView يحتاجان إليها.","استخدم position: 'absolute' للعناصر العائمة مثل الشارات، وflexWrap: 'wrap' مع gap لصفوف الوسوم."],"further":[{"title":"Layout with Flexbox","url":"https://reactnative.dev/docs/flexbox"},{"title":"Layout Props","url":"https://reactnative.dev/docs/layout-props"}],"quiz":[{"q":"صفّ فيه صورة مصغّرة بعرض 56 نقطة، وعنوان، وسهم (chevron). أسماء الرحلات الطويلة تدفع السهم خارج الحافة اليمنى. ما الإصلاح؟
","options":[{"text":"أضفflexWrap: 'wrap' إلى الصف.","why":"الالتفاف ينقل السهم إلى سطر ثانٍ، وهذا تخطيط معطوب من نوع آخر."},{"text":"أعطِ حاوية العنوان flex: 1 لتأخذ المساحة المتبقية فقط، فيلتفّ نصّها أو يُقتطع.","why":"صحيح. الأبناء لا ينكمشون افتراضيًا، وضبط flex على 1 يجعل العمود الأوسط يمتصّ العرض المتبقي بدلًا من المطالبة بكامل عرض نصّه."},{"text":"اضبط overflow: 'hidden' على الصف.","why":"هذا يقصّ السهم بدلًا من أن يفسح له مكانًا."},{"text":"أعطِ السهم flex: 1.","why":"هذا يجعل السهم يكبر ليملأ المساحة، وهو عكس ما تريده تمامًا."}],"answer":1},{"q":"في View بالتنسيقات الافتراضية، ضبطت justifyContent: 'center'. أين يذهب الأبناء؟
flex-direction تساوي row. أما React Native فالافتراضي فيه column."},{"text":"لا يتغيّر مكانهم، لأن justifyContent يحتاج أولًا إلى display: 'flex'.","why":"كل View حاوية flex أصلًا، فلا يوجد شيء تحتاج إلى تفعيله."},{"text":"إلى المنتصف عموديًا، مكدّسين في عمود.","why":"صحيح. المحور الرئيسي عمودي افتراضيًا، لذا يوسّط justifyContent الأبناء على امتداده."}],"answer":2},{"q":"شاشة التفاصيل في Trailhead عبارة عن ScrollView داخل View، وهي لا تتمرّر؛ المحتوى يُقطَع ببساطة. ما السبب المرجّح؟
","options":[{"text":"الـ View الخارجي ليس عليهflex: 1، فلا يجد الـ ScrollView ارتفاعًا محدودًا يتمرّر داخله.","why":"صحيح. يتمرّر الـ ScrollView داخل المساحة التي يمنحه إياها أبوه؛ ودون ارتفاع محدود يكبر بحجم محتواه فتقطعه الشاشة."},{"text":"يحتاج ScrollView إلى scrollEnabled={true} ليتمرّر.","why":"قيمتها true افتراضيًا أصلًا. تضبطها على false لتعطيل التمرير."},{"text":"لا يتمرّر ScrollView على Android إلا أفقيًا.","why":"يتمرّر عموديًا على المنصّتين افتراضيًا؛ والـ prop المسمّى horizontal هو ما يغيّر الاتجاه."}],"answer":0}],"exercise":{"kind":"fill","language":"tsx","template":"const styles = StyleSheet.create({\n screen: { {{0}}: 1, backgroundColor: '#f6f8f6' },\n row: {\n flexDirection: '{{1}}',\n alignItems: '{{2}}',\n gap: 12,\n padding: 12,\n },\n thumb: { width: 56, height: 56, borderRadius: 8 },\n body: { flex: {{3}} },\n chips: { flexDirection: 'row', flexWrap: '{{4}}', gap: 8 },\n badge: { position: '{{5}}', top: -4, right: -4 },\n});","blanks":[{"answers":["flex"]},{"answers":["row"]},{"answers":["center"]},{"answers":["1"]},{"answers":["wrap"]},{"answers":["absolute"]}],"title":"نسّق صفّ الرحلة","prompt":"أكمل تنسيقات القائمة في Trailhead بحيث:
\nflex: 1 على الشاشة يجعلها تملأ مساحة العرض كلها. يغيّر الصف المحور الرئيسي بـ flexDirection: 'row'، ويوسّط alignItems: 'center' الأبناء على المحور العرضي (عموديًا). وflex: 1 على الجسم يمتصّ العرض المتبقي، وهذا مهم لأن الأبناء لا ينكمشون افتراضيًا. يسمح flexWrap: 'wrap' للوسوم بالالتفاف، ويضع position: 'absolute' الشارة بالنسبة إلى أبيها دون أن تشغل مساحة.