كيف تنظم مسارات التطبيق المتداخلة (Nested Navigators) كالجمع بين Bottom Tabs و Stack؟

الإجابة المختصرة

بجعل مكون الـ Tab Navigator شاشة فرعية واحدة داخل الـ Root Stack Navigator، مما يسمح بفتح شاشات التفاصيل بكامل حجم الشاشة فوق شريط التبويبات السفلي.

الشرح

الهيكلية الأكثر شيوعاً واحترافية هي وضع شاشات ملء الشاشة (مثل تفاصيل المنتج، صفحة الدفع، النوافذ المنبثقة) في الـ Root Stack، ووضع الشاشات الرئيسية ذات التبويبات في BottomTabNavigator مستقل، مما يضمن اختفاء شريط الـ Bottom Tab بسلاسة عند التنقل لشاشات الشراء أو الإعدادات العميقة.

مثال بالكود

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="MainTabs" component={HomeTabs} options={{ headerShown: false }} />
      <Stack.Screen name="Checkout" component={CheckoutScreen} />
    </Stack.Navigator>
  );
}

أخطاء شائعة

• تغليف الـ Root Stack بداخل كل تبويب في الـ Bottom Tab بشكل منفصل، مما يسبب تكرار الـ Stacks واستهلاكاً ضخماً للذاكرة وبقاء شريط التبويب ظاهراً فوق شاشات الدفع.

أسئلة متابعة

• ما هو الفرق الجوهري بين Native Stack Navigator و Stack Navigator في React Navigation؟
• ما هي استراتيجيات تحسين الذاكرة وتجنب تراكم الشاشات في الـ Navigation Stack (Memory Pressure)؟

المصادر

• React Navigation docs — Nesting navigators