تتراوح الهواتف التي يحملها مستخدموك بين أجهزة Android صغيرة بعرض نحو 360 نقطة وأجهزة iPhone كبيرة يتجاوز عرضها 430، إضافةً إلى الأجهزة اللوحية، والهواتف القابلة للطي التي يتغيّر عرضها في منتصف الجلسة، والوضع الأفقي. وفوق ذلك، الشاشة ليست مستطيلًا نظيفًا: هناك نتوء (notch) أو Dynamic Island، وزوايا مستديرة، ومؤشّر الشاشة الرئيسية، وعلى Android أشرطة الحالة والتنقّل التي يرسم تطبيقك الآن خلفها. ثلاث أدوات تجعل Trailhead يناسب كل ذلك.
\nيُرجع useWindowDimensions() القيم width وheight وscale وfontScale للنافذة، ويعيد الـ render للـ component كلما تغيّرت:
import { useWindowDimensions } from 'react-native';\n\nexport function PhotoGrid({ photos }: { photos: string[] }) {\n const { width } = useWindowDimensions();\n const columns = width >= 700 ? 4 : 2;\n // …render photos in `columns` columns\n}ستجد كودًا قديمًا يستدعي Dimensions.get('window') على مستوى الوحدة (module). هذا يقرأ الحجم مرة واحدة، حين يُحمَّل الملف، ولا يقرؤه بعدها أبدًا: أدِر الهاتف، أو افتح التطبيق في وضع تقسيم الشاشة على iPad، أو افتح هاتفًا قابلًا للطي، وسيبقى التخطيط يستخدم العرض القديم. استخدم الـ hook داخل الـ components.
وفضّل الـ flex على القياسات حين تستطيع. معظم التخطيطات لا تحتاج إلى العرض أصلًا؛ استخدم useWindowDimensions حين تتغيّر البنية مع الحجم (عمودان يصبحان أربعة)، لا لحساب قيم بالبكسل يتولّاها الـ flexbox أصلًا.
الـ safe area (المنطقة الآمنة) هي جزء الشاشة الذي لا تغطّيه فتحات العتاد ولا واجهة النظام. ترويسات التنقّل وأشرطة الـ tabs في Expo Router تحترمها أصلًا. أما الشاشات التي لا تحويها، مثل خريطة بملء الشاشة أو صفحة تعريفية، فيجب أن تتعامل معها بنفسها.
\nالمكتبة المخصّصة لذلك هي react-native-safe-area-context. يتضمّنها Expo Router أصلًا ويوفّر الـ SafeAreaProvider في الجذر، فيمكنك استخدام الـ hook مباشرة:
import { StyleSheet, Text, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nexport default function TrackScreen() {\n const insets = useSafeAreaInsets();\n\n return (\n <View style={styles.screen}>\n {/* the map fills the whole screen, edge to edge */}\n <View style={[styles.topBar, { top: insets.top + 8 }]}>\n <Text style={styles.timer}>01:24:10</Text>\n </View>\n <View style={[styles.bottomBar, { paddingBottom: insets.bottom + 12 }]}>\n <Text>Stop and save</Text>\n </View>\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n screen: { flex: 1 },\n topBar: { position: 'absolute', left: 16, right: 16, alignItems: 'center' },\n timer: { fontSize: 20, fontWeight: '700' },\n bottomBar: { position: 'absolute', left: 0, right: 0, bottom: 0, paddingTop: 12, alignItems: 'center' },\n});يمكن للخريطة أن تُرسم تحت شريط الحالة، وهذا يبدو جميلًا، بينما تستقرّ عناصر التحكّم تحت المنطقة غير الآمنة بالضبط. للكائن insets القيم top وbottom وleft وright، فيعمل الوضع الأفقي أيضًا. وتصدّر المكتبة كذلك component باسم SafeAreaView يطبّق الحشو نيابةً عنك، وهو مفيد للشاشات البسيطة.
يشارك React Native الكود بين iOS وAndroid، لكن المنصّتين ليستا متطابقتين، والتظاهر بأنهما كذلك ينتج تطبيقًا يبدو غريبًا على كلتيهما. يعطيك Platform نظام التشغيل الحالي:
import { Platform, StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n title: {\n fontSize: 17,\n fontWeight: Platform.OS === 'ios' ? '600' : '500',\n },\n card: Platform.select({\n ios: { boxShadow: '0 2px 8px rgba(0, 0, 0, 0.12)' },\n android: { elevation: 3 },\n default: {},\n }),\n});يُرجع Platform.select القيمة الخاصة بالمنصّة الحالية، ويعود إلى default إن لم يجدها. إنه الأداة المناسبة للفروق الصغيرة: وزن خط، أو ظلّ، أو hit slop.
وحين يختلف component بأكمله، قسّمه إلى ملفات. أنشئ DatePicker.ios.tsx وDatePicker.android.tsx، ثم استورد ./DatePicker دون امتداد؛ فيختار Metro الملف المناسب لكل منصّة. والأمر نفسه يعمل مع .native.tsx و.web.tsx إن عمل Trailhead يومًا على الويب.
أين تختلف المنصّتان فعلًا؟ في أعراف التنقّل (iOS يرجع بالسحب من الحافة اليسرى؛ وAndroid لديه إيماءة رجوع على مستوى النظام)، وفي أدوات الاختيار وحقول التاريخ، وفي الخطوط الافتراضية، والاهتزاز اللمسي (haptics)، ومسارات طلب الأذونات. وحيث لا تختلفان، كقائمة الرحلات والنماذج ومنطق العمل، شارك كل شيء.
\nلنجمع القطع معًا: يجب أن تعرض شبكة الصور أكبر عدد من الأعمدة يتّسع، مع حدّ أدنى لعرض البطاقة، ومسافات متّسقة، وحشو للشاشة. هذا حساب صغير يُنفَّذ في كل مرة يتغيّر فيها العرض، وهو بالضبط نوع الدوال النقية الذي يستحق أن تكتبه بشكل صحيح مرة واحدة. ستكتبه في التمرين أدناه.
\nالتالي: القوائم. سيحمل Trailhead عمّا قليل مئات الرحلات، ورسمها كلها دفعة واحدة أسرع طريقة لجعل الهاتف يبدو بطيئًا.
\n","toc":[{"id":"sec-1","text":"قراءة حجم الشاشة بالطريقة الصحيحة","level":2},{"id":"sec-2","text":"الـ safe areas على المنصّتين","level":2},{"id":"sec-3","text":"حين تختلف المنصّتان","level":2},{"id":"sec-4","text":"شبكة تناسب الأجهزة اللوحية","level":2}],"takeaways":["useWindowDimensions() يعيد الـ render عند التدوير وتغيير الحجم؛ أما Dimensions.get() فلقطة واحدة تصبح قديمة.","الشاشات التي لا تحوي ترويسة تنقّل أو شريط tabs يجب أن تضيف حشوها بنفسها باستخدام هوامش الـ safe area من react-native-safe-area-context.","يرسم Android التطبيقات من الحافة إلى الحافة خلف أشرطة النظام، لذا تهمّ الهوامش على Android بقدر ما تهمّ على iOS.","استخدم Platform.select للفروق الصغيرة، وملفّي .ios.tsx / .android.tsx حين يختلف component بأكمله."],"further":[{"title":"Safe areas","url":"https://docs.expo.dev/develop/user-interface/safe-areas/"},{"title":"useWindowDimensions","url":"https://reactnative.dev/docs/usewindowdimensions"},{"title":"Platform-Specific Code","url":"https://reactnative.dev/docs/platform-specific-code"}],"quiz":[{"q":"تحسب شبكة الصور في Trailhead عدد أعمدتها مرة واحدة باستخدام Dimensions.get('window').width في أعلى الملف. ما الذي ينكسر؟
useWindowDimensions() داخل الـ component ليُعاد الـ render بالعرض الجديد."},{"text":"ينهار على Android لأن Dimensions خاص بـ iOS.","why":"Dimensions يعمل على المنصّتين. المشكلة أن القيمة تُقرأ مرة واحدة ولا تُحدَّث أبدًا."}],"answer":1},{"q":"خريطة Trailhead بملء الشاشة ليس لها ترويسة، وأزرارها العلوية تقع تحت الـ Dynamic Island في iPhone. ما الإصلاح الصحيح؟
","options":[{"text":"أضفpaddingTop: 50 إلى الشاشة.","why":"المقدار الصحيح يختلف بحسب الجهاز والاتجاه والمنصّة. والرقم السحري خاطئ على معظم الهواتف."},{"text":"غلّف الشاشة بـ SafeAreaView المستورد من react-native.","why":"هذا الـ component مُهمَل (deprecated)، ويعمل على iOS فقط، ولا يتعامل مع تخطيط Android من الحافة إلى الحافة."},{"text":"أخفِ شريط الحالة فلا يتداخل شيء.","why":"الـ Dynamic Island والزوايا المستديرة من العتاد؛ وإخفاء شريط الحالة لا يحرّكها."},{"text":"اقرأ useSafeAreaInsets() وطبّق insets.top على حاوية الأزرار.","why":"صحيح. الهوامش هي الحجم الدقيق للمنطقة غير الآمنة على هذا الجهاز، في هذه اللحظة، وعلى المنصّتين."}],"answer":3},{"q":"يحتاج منتقي التاريخ في Trailhead إلى components مختلفة كليًا على iOS وAndroid، بينما بقية النموذج مشتركة. ما البنية الأنظف؟
","options":[{"text":"ملفان،DatePicker.ios.tsx وDatePicker.android.tsx، يُستوردان باسم ./DatePicker.","why":"صحيح. يختار المُجمِّع الملف المناسب لكل منصّة، ويبقى كل ملف بسيطًا وسهل القراءة."},{"text":"component واحد مع if (Platform.OS === 'ios') حول كل سطر مختلف.","why":"هذا يصلح لسطر أو اثنين، لكن component كاملًا مليئًا بالتفرّعات صعب القراءة وسهل الكسر."},{"text":"تطبيقان منفصلان، واحد لكل منصّة.","why":"هذا يرمي منطق النموذج المشترك، وهو السبب الرئيسي لاستخدام React Native."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Work out how many photo cards fit across the screen, and how wide each one is.\nfunction gridLayout(screenWidth, { minCardWidth = 160, gap = 12, padding = 16 } = {}) {\n const columns = Math.floor(screenWidth / minCardWidth);\n const cardWidth = screenWidth / columns;\n return { columns, cardWidth };\n}\n\nconsole.log(gridLayout(390)); // iPhone in portrait\nconsole.log(gridLayout(820)); // iPad in portrait\n"},"solution":{"js":"function gridLayout(screenWidth, { minCardWidth = 160, gap = 12, padding = 16 } = {}) {\n const available = screenWidth - padding * 2;\n const columns = Math.max(1, Math.floor((available + gap) / (minCardWidth + gap)));\n const cardWidth = Math.floor((available - gap * (columns - 1)) / columns);\n return { columns, cardWidth };\n}\n\nconsole.log(gridLayout(390)); // iPhone in portrait\nconsole.log(gridLayout(820)); // iPad in portrait\n"},"checks":[{"id":"phone","test":"return typeof gridLayout === 'function' && (() => { const r = gridLayout(390); return r && r.columns === 2 && r.cardWidth === 173; })();"},{"id":"small-phone","test":"return (() => { const r = gridLayout(320); return r && r.columns === 1 && r.cardWidth === 288; })();"},{"id":"tablet","test":"return (() => { const r = gridLayout(820); return r && r.columns === 4 && r.cardWidth === 188; })();"},{"id":"options","test":"return (() => { const r = gridLayout(400, { minCardWidth: 100, gap: 8, padding: 20 }); return r && r.columns === 3 && r.cardWidth === 114; })();"},{"id":"never-zero","test":"return (() => { const r = gridLayout(200, { minCardWidth: 300 }); return r && r.columns === 1 && r.cardWidth === 168; })();"}],"title":"اجعل شبكة الصور تناسب أي شاشة","prompt":"تستدعي شبكة الصور في Trailhead الدالة gridLayout(width) بالقيمة القادمة من useWindowDimensions(). أصلح gridLayout(screenWidth, options) لتُرجع { columns, cardWidth } بحيث:
padding على اليسار واليمين، وبين البطاقات مسافة gap نقطة (دون مسافة عند الحافتين الخارجيتين)،columns هو أكبر عدد من البطاقات يكون عرض كلٍّ منها minCardWidth على الأقل، ولا يقلّ أبدًا عن 1،cardWidth هو العرض الذي تحصل عليه كل بطاقة حين تُقسَم المساحة المتبقية بالتساوي، مقرَّبًا إلى الأسفل إلى نقطة كاملة.القيم الافتراضية: minCardWidth = 160، gap = 12، padding = 16. مثلًا، iPhone بعرض 390 نقطة يعطي { columns: 2, cardWidth: 173 }.
screenWidth - padding * 2.","n بطاقة تحتاج إلى n عرضًا وn - 1 مسافة. لذا تتّسع n بطاقة حين يتحقّق n * minCardWidth + (n - 1) * gap <= available، وبإعادة الترتيب: n <= (available + gap) / (minCardWidth + gap).","ثم cardWidth = Math.floor((available - gap * (columns - 1)) / columns)، وغلّف عدد الأعمدة بـ Math.max(1, …)."],"explanation":"تجاهل الكود المبدئي الحشو والمسافات، ففاضت البطاقات خارج الشاشة، وكان يمكن أن يُرجع صفر أعمدة على شاشة ضيّقة (والقسمة على صفر تعطي Infinity). يبدأ الإصلاح من العرض القابل للاستخدام، ويعدّ كم وحدة من «بطاقة زائد مسافة» تتّسع (مع مسافة أقل بواحدة من عدد البطاقات)، ويضمن عمودًا واحدًا على الأقل، ويقسم العرض المتبقي بالتساوي. ولأنها دالة نقية تعتمد على العرض وحده، تتحدّث الشبكة بشكل صحيح عند التدوير وعلى الهواتف القابلة للطي بمجرد أن يُبلغ useWindowDimensions عن حجم جديد.