Stack Navigator: bu nədir, React Native-də yığın naviqasiyası

Stack Navigator nədir?

Stack Navigator — React Navigation kitabxanasının yığın modelini həyata keçirən əsas naviqatorlarından biridir. O, mobil istifadəçilərə tanış olan naviqasiyanı təmin edir: yeni ekranın açılması sağdan giriş animasiyası ilə müşayiət olunur, «Geri» düyməsi və ya sürüşdürmə jesti əvvəlki ekrana qaytarır. Stack Navigator iOS və Android-də maksimum performans üçün platformanın native komponentlərindən istifadə edərək dəstəklənir.

React Navigation React Native üçün ən populyar naviqasiya kitabxanasıdır və layihələrin 85%-də quraşdırılıb (npm məlumatlarına görə, 2026). Stack Navigator onun nüvəsinə daxildir və iki tətbiqdə mövcuddur: createNativeStackNavigator (native, tövsiyə olunan) və createStackNavigator (JavaScript, mürəkkəb xüsusi animasiyalar üçün). Native versiya React Navigation v5-də meydana çıxdı və v6+-da standart oldu.

Stack Navigator-un əsas üstünlüyü — iOS və Android istifadəçilərinə tanış olan təbii davranışdır. iOS-da yığın vizual olaraq UINavigationController, Android-də isə slide animasiyası ilə FragmentManager ilə təmsil olunur. Tərtibatçı yığın məntiqini əl ilə həyata keçirməli deyil — naviqator ekran vəziyyətlərini, back stack və animasiyaları avtomatik idarə edir.

Yığın naviqasiyası necə işləyir

Yığın naviqasiyası LIFO (Last In, First Out) prinsipinə əsaslanır. İstifadəçi yeni ekran açdıqda, naviqator onu yığının yuxarısına yerləşdirir. «Geri» düyməsi basıldıqda yuxarı ekran silinir və istifadəçi əvvəlkini görür. Yığın istənilən sayda ekran ehtiva edə bilər — məhdudiyyət yalnız cihaz yaddaşıdır.

Yığındakı hər ekran öz vəziyyətini saxlayır. Əvvəlki ekrana qayıtdıqda onun vəziyyəti avtomatik bərpa olunur. Bu, yığını digər naviqasiya növlərindən (Tab, Drawer) fərqləndirir, burada ekranlar yenidən yaradıla bilər. React Navigation naviqasiya kontekstinin öz mexanizmi vasitəsilə vəziyyəti idarə edir.

Geri qayıtmaq üçün sürüşdürmə jesti

iOS-da Stack Navigator geri qayıtmaq üçün ekranın sol kənarından sürüşdürmə jestini dəstəkləyir — bu, istifadəçilərin gözlədiyi standart iOS davranışıdır. Android-də jest standart olaraq söndürülür, lakin gestureEnabled seçimi ilə aktivləşdirilə bilər. Native Stack-də jest native şəkildə işləyir, JavaScript axınında gecikmələr olmadan.

Native Stack və JS Stack

React Navigation iki növ Stack Navigator təklif edir: Native Stack (createNativeStackNavigator) və JS Stack (createStackNavigator). Əsas fərq animasiyanın yerinə yetirilmə yeridir. Native Stack iOS və Android-in native animasiya sürücülərindən istifadə edir, JS Stack isə React Native-in JavaScript axını ilə işləyir. Onların arasında seçim performans və fərdiləşdirmə tələblərindən asılıdır.

Native Stack əksər layihələr üçün tövsiyə olunur. O, JS axınını bloklamadan hamar 60 FPS animasiyaları təmin edir, iOS-da sistem sürüşdürmə jestini dəstəkləyir və native keçidlərdən istifadə edir — iOS-da slide, Android-də fade. Lakin Native Stack animasiyaların fərdiləşdirilməsində məhduddur: yalnız əvvəlcədən təyin edilmiş keçidlər dəsti mövcuddur.

JS Stack cardStyleInterpolator vasitəsilə animasiyalar üzərində tam nəzarət verir. Tərtibatçı istənilən animasiya yarada bilər: miqyaslama, fırlatma, paralaks, xüsusi əyrilər. Mənfi cəhət — animasiyalar JS axınında işləyir, bu da mürəkkəb keçidlərdə zəif cihazlarda kadr düşmələrinə səbəb ola bilər. Layihələrin 70%-i üçün Native Stack tam kifayətdir.

// Native Stack — tövsiyə olunan tətbiq
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-un quraşdırılması və konfiqurasiyası

Stack Navigator ilə işə başlamaq üçün React Navigation və onun asılılıqlarını quraşdırmaq lazımdır. Minimum dəst @react-navigation/native, @react-navigation/native-stack və react-native-screens daxildir. Quraşdırmadan sonra tətbiq NavigationContainer ilə sarılır — bütün uşaq komponentlərə naviqasiya vəziyyətini təmin edən kontekst.

# React Navigation asılılıqlarının quraşdırılması
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# iOS üçün — pod quraşdırılması
cd ios && pod install && cd ..

Quraşdırmadan sonra RootStackParamList-də müəyyən edilmiş ekranlarla Stack.Navigator yaradılır. Hər ekran component prop vasitəsilə React komponenti ilə əlaqələndirilir. Naviqator kök və ya başqa naviqatora (Tab, Drawer) yerləşdirilmiş ola bilər. Konfiqurasiya üçün screenOptions istifadə olunur — bütün ekranlar üçün ümumi və ya hər biri üçün fərdi.

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: 'Ana səhifə' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Stack Navigator parametrləri və fərdiləşdirilməsi

Stack Navigator görünüş və davranışı fərdiləşdirmək üçün çoxlu seçimlər təqdim edir. Əsas parametrlər Navigator səviyyəsində screenOptions və ya Screen səviyyəsində options vasitəsilə təyin edilir. Tərtibatçı başlığı, keçid animasiyasını, sürüşdürmə jestini, kart stilini və fon qaraldılmasını konfiqurasiya edə bilər. Parametrlərin çevikliyi naviqasiyanı tətbiqin dizayn sisteminə uyğunlaşdırmağa imkan verir.

cardStyleInterpolator ilə xüsusi animasiyalar

JS Stack üçün cardStyleInterpolator ekranlar arasında ixtiyari keçid animasiyaları yaratmağa imkan verir. Bu, unikal vizual effektləri həyata keçirmək üçün güclü vasitədir: miqyaslama, fırlatma, paralaks, üfüqi flip. Funksiya animasiyanın cari irəliləyiş dəyərlərini (current, next) alır və animasiya edilən elementlər üçün stillər qaytarır.

TypeScript ilə naviqasiyanın tipləşdirilməsi

Stack Navigator TypeScript vasitəsilə tam tipləşdirməni dəstəkləyir. Bunun üçün RootStackParamList — açar kimi ekran adları, dəyər kimi parametr tipləri olan tip-obyekt təyin edilir. Tipləşdirmədən sonra navigation.navigate və route.params avtomatik tamamlama və tip yoxlaması alır. Bu, parametr ötürmə xətalarını kompilyasiya mərhələsində aradan qaldırır.

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

// Tipləşdirilmiş ekran
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

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

  return (
    <View>
      <Text>Məhsul {id} — {category}</Text>
      <Button title="Səbətə"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Qabaqcıl ssenarilər: modal pəncərələr və qruplar

Stack Navigator ekranların qruplaşdırılmasını və modal pəncərələri dəstəkləyir. Qruplar (Screen Group) təkrarlanmadan bir neçə ekrana ümumi parametrlər tətbiq etməyə imkan verir. Modal pəncərələr stack presentation: 'modal' vasitəsilə həyata keçirilir — ekran iOS-da sistem modalı kimi aşağıdan fon qaraldılması ilə açılır. Bu seçim yalnız Native Stack-də mövcuddur.

Mürəkkəb naviqasiya üçün Stack Navigator Tab Navigator və ya Drawer Navigator daxilinə yerləşdirilə bilər. Məsələn, «Ana səhifə» nişanı öz ekran yığınını, «Profil» nişanı isə öz yığınını ehtiva edir. Naviqatorların belə kompozisiyası istehsal tətbiqləri üçün standart yanaşmadır. Hər yığın təcrid olunub: nişan daxilində back stack digər nişanlara təsir etmir.

// Tab Navigator-da yerləşdirilmiş yığın
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>
  );
}

// Ümumi seçimləri olan ekran qrupları
<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>