Stack Navigator: bu nima, React Native'da stek navigatsiyasi

Stack Navigator nima?

Stack Navigator — React Navigation kutubxonasining stek modelini amalga oshiruvchi asosiy navigatorlaridan biri. U mobil foydalanuvchilarga tanish bo'lgan navigatsiyani ta'minlaydi: yangi ekranning ochilishi o'ng tomondan kirish animatsiyasi bilan birga keladi va «Orqaga» tugmasi yoki surish imo-ishorasi foydalanuvchini oldingi ekranga qaytaradi. Stack Navigator iOS va Android'da maksimal ishlash uchun platformaning native komponentlaridan foydalanib qo'llab-quvvatlanadi.

React Navigation React Native uchun eng mashhur navigatsiya kutubxonasi bo'lib, loyihalarning 85%ida o'rnatilgan (npm ma'lumotlariga ko'ra, 2026). Stack Navigator uning yadrosiga kiradi va ikki xil tatbiqda mavjud: createNativeStackNavigator (native, tavsiya etilgan) va createStackNavigator (JavaScript, murakkab maxsus animatsiyalar uchun). Native versiya React Navigation v5 da paydo bo'ldi va v6+ da standartga aylandi.

Stack Navigator ning asosiy afzalligi — iOS va Android foydalanuvchilariga tanish bo'lgan tabiiy xatti-harakatdir. iOS'da stek vizual ravishda UINavigationController, Android'da esa slide animatsiyasi bilan FragmentManager orqali ifodalanadi. Dasturchi stek mantiqini qo'lda amalga oshirishi shart emas — navigator ekran holatlari, back stack va animatsiyalarni avtomatik boshqaradi.

Stek navigatsiyasi qanday ishlaydi

Stek navigatsiyasi LIFO (Last In, First Out) prinsipiga asoslanadi. Foydalanuvchi yangi ekran ochganda, navigator uni stekning yuqorisiga joylashtiradi. «Orqaga» tugmasi bosilganda yuqori ekran olib tashlanadi va foydalanuvchi oldingisini ko'radi. Stek istalgan miqdordagi ekranlarni o'z ichiga olishi mumkin — cheklov faqat qurilma xotirasidir.

Stekdagi har bir ekran o'z holatini saqlaydi. Oldingi ekranga qaytganda uning holati avtomatik tiklanadi. Bu stekni navigatsiyaning boshqa turlaridan (Tab, Drawer) farqlaydi, bu yerda ekranlar qayta yaratilishi mumkin. React Navigation holatni navigatsiya kontekstining o'z mexanizmi orqali boshqaradi.

Qaytish uchun surish imo-ishorasi

iOS'da Stack Navigator qaytish uchun ekranning chap chetidan surish imo-ishorasini qo'llab-quvvatlaydi — bu foydalanuvchilar kutayotgan standart iOS xatti-harakatidir. Android'da imo-ishora sukut bo'yicha o'chirilgan, lekin gestureEnabled opsiyasi orqali yoqilishi mumkin. Native Stack'da imo-ishora native ishlaydi, JavaScript oqimida kechikishlarsiz.

Native Stack va JS Stack

React Navigation ikki turdagi Stack Navigator ni taklif qiladi: Native Stack (createNativeStackNavigator) va JS Stack (createStackNavigator). Asosiy farq — animatsiyani bajarish joyi. Native Stack iOS va Android'ning native animatsiya drayverlaridan foydalanadi, JS Stack esa React Native'ning JavaScript oqimi orqali ishlaydi. Ularning o'rtasida tanlov ishlash va moslashtirish talablariga bog'liq.

Native Stack ko'pchilik loyihalar uchun tavsiya etiladi. U JS oqimini bloklamasdan silliq 60 FPS animatsiyalarni ta'minlaydi, iOS'da tizim surish imo-ishorasini qo'llab-quvvatlaydi va native o'tishlardan foydalanadi — iOS'da slide, Android'da fade. Biroq Native Stack animatsiyalarni moslashtirishda cheklangan: faqat oldindan belgilangan o'tishlar to'plami mavjud.

JS Stack cardStyleInterpolator orqali animatsiyalar ustidan to'liq nazorat beradi. Dasturchi istalgan animatsiyani yaratishi mumkin: masshtablash, aylantirish, parallaks, maxsus egri chiziqlar. Salbiy tomoni — animatsiyalar JS oqimida ishlaydi, bu murakkab o'tishlarda zaif qurilmalarda kadr tushishiga olib kelishi mumkin. Loyihalarning 70%i uchun Native Stack to'liq yetarli.

// Native Stack — tavsiya etilgan tatbiq
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 o'rnatish va sozlash

Stack Navigator bilan ishlashni boshlash uchun React Navigation va uning bog'liqliklarini o'rnatish kerak. Minimal to'plam @react-navigation/native, @react-navigation/native-stack va react-native-screens ni o'z ichiga oladi. O'rnatishdan so'ng ilova NavigationContainer bilan o'raladi — barcha bola komponentlarga navigatsiya holatini ta'minlovchi kontekst.

# React Navigation bog'liqliklarini o'rnatish
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# iOS uchun — pod o'rnatish
cd ios && pod install && cd ..

O'rnatishdan so'ng RootStackParamList'da belgilangan ekranlar bilan Stack.Navigator yaratiladi. Har bir ekran component prop orqali React komponenti bilan bog'lanadi. Navigator ildiz yoki boshqa navigator (Tab, Drawer) ichiga joylashtirilgan bo'lishi mumkin. Sozlash uchun screenOptions ishlatiladi — barcha ekranlar uchun umumiy yoki har biri uchun individual.

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

Stack Navigator parametrlari va moslashtirish

Stack Navigator tashqi ko'rinish va xatti-harakatni moslashtirish uchun ko'plab opsiyalarni taklif qiladi. Asosiy parametrlar Navigator darajasida screenOptions yoki Screen darajasida options orqali o'rnatiladi. Dasturchi sarlavha, o'tish animatsiyasi, surish imo-ishorasi, karta uslubi va fon qorayishini sozlashi mumkin. Sozlamalarning moslashuvchanligi navigatsiyani ilova dizayn tizimiga moslashtirishga imkon beradi.

cardStyleInterpolator orqali maxsus animatsiyalar

JS Stack uchun cardStyleInterpolator ekranlar o'rtasida ixtiyoriy o'tish animatsiyalarini yaratishga imkon beradi. Bu noyob vizual effektlarni amalga oshirish uchun kuchli vositadir: masshtablash, aylantirish, parallaks, gorizontal flip. Funksiya animatsiyaning joriy rivojlanish qiymatlarini (current, next) oladi va animatsiya qilinadigan elementlar uchun uslublarni qaytaradi.

TypeScript bilan navigatsiyani tiplash

Stack Navigator TypeScript orqali to'liq tiplashni qo'llab-quvvatlaydi. Buning uchun RootStackParamList — kalitlari ekran nomlari, qiymatlari parametr turlari bo'lgan tur-obyekt aniqlanadi. Tiplashdan so'ng navigation.navigate va route.params avtomatik to'ldirish va tur tekshiruvini oladi. Bu parametr uzatish xatolarini kompilyatsiya bosqichida bartaraf etadi.

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

// Tiplangan ekran
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

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

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

Ilg'or stsenariylar: modal oynalar va guruhlar

Stack Navigator ekranlarni guruhlash va modal oynalarni qo'llab-quvvatlaydi. Guruhlar (Screen Group) takrorlanmasdan bir nechta ekranga umumiy sozlamalarni qo'llash imkonini beradi. Modal oynalar stack presentation: 'modal' orqali amalga oshiriladi — ekran iOS'dagi tizim modali kabi fon qorayishi bilan pastdan ochiladi. Bu opsiya faqat Native Stack'da mavjud.

Murakkab navigatsiya uchun Stack Navigator Tab Navigator yoki Drawer Navigator ichiga joylashtirilishi mumkin. Masalan, «Bosh sahifa» yorlig'i o'z ekran stekiga, «Profil» yorlig'i esa o'z stekiga ega. Navigatorlarning bunday kompozitsiyasi ishlab chiqarish ilovalari uchun standart yondashuvdir. Har bir stek izolyatsiya qilingan: yorliq ichidagi back stack boshqa yorliqlarga ta'sir qilmaydi.

// Tab Navigator'ga joylashtirilgan stek
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>
  );
}

// Umumiy opsiyalarga ega ekran guruhlari
<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>