أسئلة مقابلات React Navigation & Screen Stacks في React Native
10 سؤال عن React Navigation & Screen Stacks من مسار React Native. اقرأ الإجابة المختصرة لكل سؤال هنا، وافتح السؤال للشرح الكامل والأمثلة والأخطاء الشائعة والمصادر.
- متوسط
ما هو الفرق الجوهري بين Native Stack Navigator و Stack Navigator في React Navigation؟
الـ Native Stack يستفيد من مكونات التنقل الأصلية لنظامي التشغيل (UINavigationController على iOS و FragmentManager على Android) لأداء أقرب للأصلي، بينما الـ Stack العادي يحاكي الحركات بكود JavaScript داخل الـ JS Thread.
اقرأ الشرح الكامل - متقدم
كيف تطبق أمان الأنواع الكامل (Type-Safe Navigation) في React Navigation مع TypeScript؟
بتعريف RootStackParamList يحدد أسماء كافة المسارات ونوع المعاملات المقبولة، واستخدامه مع NativeStackScreenProps أو خطاف useNavigation.
اقرأ الشرح الكامل - متوسط
كيف تنظم مسارات التطبيق المتداخلة (Nested Navigators) كالجمع بين Bottom Tabs و Stack؟
بجعل مكون الـ Tab Navigator شاشة فرعية واحدة داخل الـ Root Stack Navigator، مما يسمح بفتح شاشات التفاصيل بكامل حجم الشاشة فوق شريط التبويبات السفلي.
اقرأ الشرح الكامل - متقدم
كيف تدير الروابط العميقة (Deep Linking & Universal Links) لفتح شاشات محددة من الروابط الخارجية؟
بتهيئة كائن linking في NavigationContainer مع تحديد الـ prefixes (Scheme و Web Domain) وربط روابط الـ URL بمسارات الشاشات ومعاملاتها.
اقرأ الشرح الكامل - متوسط
ما هي أحداث دورة حياة الشاشة في React Navigation (useFocusEffect و useIsFocused)؟
نظراً لأن الشاشات تظل معلقة في الذاكرة داخل مكدس الـ Stack عند الانتقال للأمام، فإن useEffect العادي لا يعمل عند الرجوع؛ لذلك نستخدم useFocusEffect لتشغيل المنطق في كل مرة تصبح فيها الشاشة نشطة ومعروضة.
اقرأ الشرح الكامل - متوسط
كيف تطبق تدفق المصادقة المشروط (Conditional Authentication Flow) بأفضل ممارسة؟
عبر التصيير الشرطي لشاشات الـ Auth أو شاشات الـ Main App داخل نفس الـ Navigator بناءً على حالة المستخدم الموثقة، بدلاً من التوجيه البرمجي اليدوي بـ navigate.
اقرأ الشرح الكامل - متقدم
ما هي معمارية Expo Router وكيف تختلف بنية File-based Routing عن React Navigation التقليدي؟
يعتمد Expo Router على هيكل الملفات والمجلدات لتوليد مسارات التطبيق تلقائياً (كما في Next.js) مع دعم الروابط العميقة و Universal Links افتراضياً وتوحيد كود الويب والهاتف.
اقرأ الشرح الكامل - متوسط
كيف تخصص شريط العنوان العلوي (Custom Navigation Header) مع الحفاظ على أداء الـ Native؟
باستخدام خاصية headerTitle لتمرير مكون مخصص أو تخصيص headerStyle و headerTintColor، وتجنب استخدام header الكامل المكتوب بـ JS إن لم تكن هناك حاجة قاهرة.
اقرأ الشرح الكامل - متوسط
كيف تتعامل مع زر الرجوع الفعلي (Hardware Back Button) في أجهزة أندرويد داخل شاشاتك؟
باستخدام وحدة BackHandler لإضافة مستمع للحدث "hardwareBackPress"، وإرجاع true لمنع الرجوع الافتراضي وتنفيذ إجراء مخصص (مثل تأكيد الخروج أو غلق نافذة).
اقرأ الشرح الكامل - متقدم
ما هي استراتيجيات تحسين الذاكرة وتجنب تراكم الشاشات في الـ Navigation Stack (Memory Pressure)؟
باستخدام navigation.replace بدلًا من push للتنقلات المتكررة في نفس السياق، وتجميد الشاشات غير النشطة عبر freezeOnBlur (بدعم react-native-screens)، وعدم إبقاء المحتوى الثقيل مرسومًا في الخلفية؛ وكان خيار unmountOnBlur متاحًا في الإصدارات القديمة لكنه أُزيل في React Navigation 7.
اقرأ الشرح الكامل