أسئلة مقابلات Styling, Layout & Flexbox في React Native
10 سؤال عن Styling, Layout & Flexbox من مسار React Native. اقرأ الإجابة المختصرة لكل سؤال هنا، وافتح السؤال للشرح الكامل والأمثلة والأخطاء الشائعة والمصادر.
- مبتدئ
ما هي الفروقات الرئيسية بين CSS على المتصفح ونظام التنسيق في React Native؟
في React Native لا توجد ملفات CSS تقليدية، وتكتب الخصائص بصيغة camelCase ككائنات JavaScript، وتدعم Flexbox فقط بدون Grid أو float، ويكون flexDirection الافتراضي column، وتكون كافة الأبعاد بلا وحدات (Density-independent Pixels).
اقرأ الشرح الكامل - مبتدئ
لماذا يعتبر StyleSheet.create مفضلاً على استخدام Inline Styles المباشرة؟
لأنه يتحقق من صحة أسماء وقيم التنسيقات عند الإنشاء، ويوفر أمان الأنواع في TypeScript، ويرسل التنسيقات مرة واحدة عبر الذاكرة الأصلية لربطها بمعرفات رقمية ثابتة (IDs) بدلاً من إنشاء كائنات جديدة في كل دورة تصيير.
اقرأ الشرح الكامل - متوسط
كيف تتعامل مع تصميم واجهات متجاوبة (Responsive Layouts) لمختلف أحجام الهواتف والتابلت؟
باستخدام useWindowDimensions لمراقبة تغييرات الحجم وتدوير الشاشة، مقترنة بنسب Flexbox المئوية والمكتبات المساعدة لحساب مقاييس متناسبة (Scaling utilities).
اقرأ الشرح الكامل - متوسط
كيف يتم التعامل مع الظلال (Shadows & Elevation) بين نظامي iOS و Android؟
نظام iOS يستخدم خصائص shadowColor و shadowOffset و shadowOpacity و shadowRadius، بينما يستخدم أندرويد خاصية واحدة مدمجة هي elevation ترتبط بارتفاع العنصر عن الخلفية.
اقرأ الشرح الكامل - متوسط
كيف تدعم وتخصص الخطوط المخصصة (Custom Fonts) والتعامل مع مشاكل الارتفاع والـ Line Height؟
بإضافة ملفات الخطوط (TTF/OTF) وربطها عبر Expo Font أو مجلد assets في البناء الخالص، واستخدام اسم الخط الصحيح في fontFamily، مع ضبط lineHeight بما يناسب تكبير النظام.
اقرأ الشرح الكامل - متقدم
كيف تدعم اتجاه الكتابة من اليمين لليسار (RTL Support) وتخطيط الواجهات للغة العربية؟
باستخدام وحدة I18nManager وخصائص Flexbox المحايدة للاتجاه مثل marginStart و marginEnd و paddingStart و paddingEnd بدلاً من left و right.
اقرأ الشرح الكامل - متوسط
ما هي مكتبة NativeWind وكيف تمكن المطورين من استخدام Tailwind CSS داخل React Native؟
هي مكتبة تقوم بترجمة فئات Tailwind CSS إلى كائنات StyleSheet متوافقة مع React Native في وقت التجميع (Build-time)، مما يتيح كتابة فئات className قياسية فائقة السرعة والأناقة.
اقرأ الشرح الكامل - مبتدئ
كيف تدير الوضع الليلي والنهاري (Dark & Light Mode) بسلاسة بالاعتماد على useColorScheme؟
باستخدام خطاف useColorScheme للاستماع لسمة نظام تشغيل الجهاز، وربطه بكائن ألوان ديناميكي أو Theme Provider لتحديث ألوان الشاشات فورياً.
اقرأ الشرح الكامل - مبتدئ
ما الفرق بين position: "relative" و position: "absolute" في تخطيط React Native؟
العناصر ذات التنسيق relative تظل ضمن التدفق الطبيعي للـ Flexbox وتتحرك بالنسبة لموضعها الأصلي، بينما absolute تُستثنى تماماً من تدفق المحاذاة وتثبت بالنسبة لأقرب حاوية أب.
اقرأ الشرح الكامل - مبتدئ
ما هي فائدة واستخدامات خاصية AspectRatio في بناء البطاقات والصور المرنة؟
تتحكم خاصية aspectRatio في نسبة العرض إلى الارتفاع لأي عنصر مرئي تلقائياً (مثل 16/9 أو 1/1)، مما يجعل الارتفاع يتكيف بمرونة ودقة فور تغير عرض الشاشة.
اقرأ الشرح الكامل