Stack Navigator: ما هو، التنقل بالمكدس في React Native

ما هو Stack Navigator؟

Stack Navigator — أحد الملاحين الأساسيين لمكتبة React Navigation الذي يطبق نموذج المكدس للشاشات. يوفر التنقل المألوف لمستخدمي الهواتف المحمولة: فتح شاشة جديدة يصاحبه رسم متحرك للانزلاق لليمين، وزر «رجوع» أو إيماءة السحب تعيد المستخدم إلى الشاشة السابقة. يدعم Stack Navigator أنظمة iOS و Android باستخدام مكونات أصلية للمنصة لتحقيق أقصى أداء.

React Navigation هي مكتبة التنقل الأكثر شيوعاً لـ React Native، مثبتة في 85٪ من المشاريع (وفقاً لبيانات npm، 2026). Stack Navigator جزء من نواتها الأساسية ومتوفر بنسختين: createNativeStackNavigator (أصلي، موصى به) و createStackNavigator (JavaScript، للرسوم المتحركة المخصصة المعقدة). ظهرت النسخة الأصلية في React Navigation v5 وأصبحت المعيار في v6+.

الميزة الرئيسية لـ Stack Navigator — السلوك الطبيعي المألوف لمستخدمي iOS و Android. على iOS، يتم تمثيل المكدس بصرياً عبر UINavigationController، على Android — عبر FragmentManager مع رسم متحرك للانزلاق. لا يحتاج المطور إلى تنفيذ منطق المكدس يدوياً — يدير الملاح حالات الشاشات، مكدس الرجوع والرسوم المتحركة تلقائياً.

كيف يعمل التنقل بالمكدس

التنقل بالمكدس يعتمد على مبدأ LIFO (Last In, First Out). عندما يفتح المستخدم شاشة جديدة، يضعها الملاح على قمة المكدس. عند الضغط على «رجوع»، تُحذف الشاشة العلوية ويرى المستخدم الشاشة السابقة. يمكن أن يحتوي المكدس على أي عدد من الشاشات — القيد الوحيد هو ذاكرة الجهاز.

كل شاشة في المكدس تحتفظ بحالتها. عند العودة إلى شاشة سابقة، يتم استعادة حالتها تلقائياً. هذا يميز المكدس عن أنواع التنقل الأخرى (Tab، Drawer)، حيث قد يتم إعادة إنشاء الشاشات. تدير React Navigation الحالة عبر آلية سياق التنقل الخاصة بها.

إيماءة السحب للرجوع

على iOS، يدعم Stack Navigator إيماءة السحب من الحافة اليسرى للرجوع — هذا هو السلوك القياسي لنظام iOS الذي يتوقعه المستخدمون. على Android، الإيماءة معطلة افتراضياً، لكن يمكن تفعيلها عبر خيار gestureEnabled. في Native Stack، تعمل الإيماءة بشكل أصلي دون تأخير من خيط JavaScript.

Native Stack مقابل JS Stack

تقدم React Navigation نوعين من Stack Navigator: Native Stack (createNativeStackNavigator) و JS Stack (createStackNavigator). الفرق الرئيسي — مكان تنفيذ الرسوم المتحركة. يستخدم Native Stack مشغلات الرسوم المتحركة الأصلية لنظامي iOS و Android، بينما يعمل JS Stack عبر خيط JavaScript الخاص بـ React Native. يعتمد الاختيار بينهما على متطلبات الأداء والتخصيص.

Native Stack موصى به لمعظم المشاريع. يوفر رسوماً متحركة سلسة بمعدل 60 إطاراً في الثانية دون حظر خيط JS، يدعم إيماءة السحب للخلف على iOS ويستخدم انتقالات أصلية — slide على iOS، fade على Android. لكن Native Stack محدود في تخصيص الرسوم المتحركة: متوفر فقط مجموعة محددة مسبقاً من الانتقالات.

JS Stack يمنح تحكماً كاملاً في الرسوم المتحركة عبر cardStyleInterpolator. يمكن للمطور إنشاء أي رسم متحرك: تحجيم، تدوير، تزيح، منحنيات مخصصة. العيب — تعمل الرسوم المتحركة في خيط JS، مما قد يسبب انخفاض الإطارات على الأجهزة الضعيفة مع انتقالات معقدة. لـ 70٪ من المشاريع، Native Stack أكثر من كافٍ.

// Native Stack — التنفيذ الموصى به
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

تثبيت وإعداد Stack Navigator

للبدء مع Stack Navigator، يجب تثبيت React Navigation وتوابعه. المجموعة الدنيا تشمل @react-navigation/native، @react-navigation/native-stack و react-native-screens. بعد التثبيت، يتم تغليف التطبيق في NavigationContainer — سياق يوفر حالة التنقل لجميع المكونات التابعة.

# تثبيت تبعيات React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# لنظام iOS — تثبيت pod
cd ios && pod install && cd ..

بعد التثبيت، يتم إنشاء Stack.Navigator مع شاشات محددة في RootStackParamList. ترتبط كل شاشة بمكون React عبر الخاصية component. يمكن أن يكون الملاح جذرياً أو متداخلاً داخل ملاح آخر (Tab، Drawer). للتكوين، تُستخدم screenOptions — مشتركة لجميع الشاشات أو فردية لكل شاشة.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'الرئيسية' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

خيارات وتخصيص Stack Navigator

Stack Navigator يوفر العديد من الخيارات لتخصيص المظهر والسلوك. تُحدد المعلمات الرئيسية عبر screenOptions على مستوى Navigator أو options على مستوى Screen. يمكن للمطور تكوين العنوان، رسم الانتقال المتحرك، إيماءة السحب، نمط البطاقة وتعتيم الخلفية. تسمح مرونة الإعدادات بتكييف التنقل مع نظام تصميم التطبيق.

رسوم متحركة مخصصة عبر cardStyleInterpolator

لـ JS Stack، cardStyleInterpolator يسمح بإنشاء رسوم انتقالية مخصصة بين الشاشات. هذه أداة قوية لتنفيذ تأثيرات بصرية فريدة: تحجيم، تدوير، تزيح، قلب أفقي. تستقبل الدالة قيم تقدم الرسم المتحرك الحالية (current، next) وتعيد أنماطاً للعناصر المتحركة.

كتابة أنواع التنقل باستخدام TypeScript

Stack Navigator يدعم الكتابة الكاملة للأنواع عبر TypeScript. لذلك، يتم تعريف RootStackParamList — نوع كائن حيث المفاتيح هي أسماء الشاشات والقيم هي أنواع المعلمات. بعد الكتابة، يحصل navigation.navigate و route.params على الإكمال التلقائي والتحقق من الأنواع. هذا يلغي أخطاء تمرير المعلمات في وقت الترجمة.

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// شاشة مكتوبة الأنواع
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>المنتج {id} — {category}</Text>
      <Button title="أضف إلى السلة"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

سيناريوهات متقدمة: النوافذ المشروطة والمجموعات

Stack Navigator يدعم تجميع الشاشات والنوافذ المشروطة. تسمح المجموعات (Screen Group) بتطبيق إعدادات مشتركة على عدة شاشات دون تكرار. تُنفذ النوافذ المشروطة عبر stack presentation: 'modal' — تفتح الشاشة من الأسفل مع تعتيم الخلفية، مثل النافذة المشروطة للنظام على iOS. هذا الخيار متوفر فقط في Native Stack.

للتنقل المعقد، يمكن تداخل Stack Navigator داخل Tab Navigator أو Drawer Navigator. مثلاً، علامة التبويب «الرئيسية» تحتوي على مكدس شاشات خاص بها، وعلامة التبويب «الملف الشخصي» تحتوي على مكدسها الخاص. هذا التركيب للملاحين هو النهج القياسي لتطبيقات الإنتاج. كل مكدس معزول: مكدس الرجوع داخل علامة تبويب لا يؤثر على علامات التبويب الأخرى.

// مكدس متداخل في Tab Navigator
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// مجموعات شاشات بخيارات مشتركة
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>