Stack Navigator: nedir, React Native'te yığın navigasyonu

Stack Navigator Nedir?

Stack Navigator — ekranların yığın modelini uygulayan React Navigation kütüphanesinin temel navigatörlerinden biridir. Mobil kullanıcıların aşina olduğu navigasyonu sağlar: yeni bir ekran açmaya sağa kaydırma animasyonu eşlik eder ve «Geri» düğmesi veya kaydırma hareketi kullanıcıyı bir önceki ekrana döndürür. Stack Navigator, maksimum performans için platformun yerel bileşenlerini kullanarak iOS ve Android'i destekler.

React Navigation, React Native için en popüler navigasyon kütüphanesidir ve projelerin %85'inde kuruludur (npm verilerine göre, 2026). Stack Navigator çekirdeğinin bir parçasıdır ve iki uygulamada mevcuttur: createNativeStackNavigator (yerel, önerilen) ve createStackNavigator (JavaScript, karmaşık özel animasyonlar için). Yerel sürüm React Navigation v5'te ortaya çıktı ve v6+'da standart haline geldi.

Stack Navigator'ın ana avantajı — iOS ve Android kullanıcılarının aşina olduğu doğal davranıştır. iOS'ta yığın görsel olarak UINavigationController tarafından, Android'de ise kaydırma animasyonlu FragmentManager tarafından temsil edilir. Geliştiricinin yığın mantığını manuel olarak uygulaması gerekmez — navigatör ekran durumlarını, geri yığınını ve animasyonları otomatik olarak yönetir.

Yığın Navigasyonu Nasıl Çalışır

Yığın navigasyonu LIFO (Last In, First Out) prensibine dayanır. Kullanıcı yeni bir ekran açtığında, navigatör onu yığının en üstüne yerleştirir. «Geri»ye basıldığında, üst ekran kaldırılır ve kullanıcı bir önceki ekranı görür. Yığın herhangi bir sayıda ekran içerebilir — tek sınır cihaz belleğidir.

Yığındaki her ekran durumunu korur. Bir önceki ekrana dönüldüğünde, durumu otomatik olarak geri yüklenir. Bu, yığını diğer navigasyon türlerinden (Tab, Drawer) ayırır; bu türlerde ekranlar yeniden oluşturulabilir. React Navigation, kendi navigasyon bağlam mekanizması aracılığıyla durumu yönetir.

Geri Dönmek İçin Kaydırma Hareketi

iOS'ta Stack Navigator, geri dönmek için sol kenardan kaydırma hareketini destekler — bu, kullanıcıların beklediği standart iOS davranışıdır. Android'de hareket varsayılan olarak devre dışıdır ancak gestureEnabled seçeneğiyle etkinleştirilebilir. Native Stack'te hareket, JavaScript iş parçacığı gecikmesi olmadan yerel olarak çalışır.

Native Stack vs JS Stack

React Navigation iki tür Stack Navigator sunar: Native Stack (createNativeStackNavigator) ve JS Stack (createStackNavigator). Temel fark — animasyonun nerede yürütüldüğüdür. Native Stack, iOS ve Android'in yerel animasyon sürücülerini kullanırken, JS Stack, React Native'in JavaScript iş parçacığı aracılığıyla çalışır. Aralarındaki seçim, performans ve özelleştirme gereksinimlerine bağlıdır.

Native Stack çoğu proje için önerilir. JS iş parçacığını engellemeden akıcı 60 FPS animasyonlar sağlar, iOS'ta sistem kaydırma-geri hareketini destekler ve yerel geçişler kullanır — iOS'ta slide, Android'de fade. Ancak Native Stack, animasyon özelleştirmede sınırlıdır: yalnızca önceden tanımlanmış bir geçiş kümesi mevcuttur.

JS Stack, cardStyleInterpolator aracılığıyla animasyonlar üzerinde tam kontrol sağlar. Geliştirici herhangi bir animasyon oluşturabilir: ölçekleme, döndürme, paralaks, özel eğriler. Dezavantajı — animasyonlar JS iş parçacığında çalışır ve karmaşık geçişlerde zayıf cihazlarda kare düşüşlerine neden olabilir. Projelerin %70'i için Native Stack fazlasıyla yeterlidir.

// Native Stack — önerilen uygulama
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 Kurulumu ve Yapılandırması

Stack Navigator ile başlamak için React Navigation ve bağımlılıklarını kurmak gerekir. Minimum küme @react-navigation/native, @react-navigation/native-stack ve react-native-screens'i içerir. Kurulumdan sonra uygulama NavigationContainer'a sarılır — bu, tüm alt bileşenlere navigasyon durumu sağlayan bir bağlamdır.

# React Navigation bağımlılıklarını kurma
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# iOS için — pod kurulumu
cd ios && pod install && cd ..

Kurulumdan sonra, Stack.Navigator RootStackParamList'te tanımlanan belirli ekranlarla oluşturulur. Her ekran, component prop aracılığıyla bir React bileşenine bağlanır. Navigatör, kök veya başka bir navigatörün (Tab, Drawer) içine yerleştirilmiş olabilir. Yapılandırma için screenOptions kullanılır — tüm ekranlar için ortak veya her biri için ayrı.

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

Stack Navigator Parametreleri ve Özelleştirme

Stack Navigator, görünüm ve davranışı özelleştirmek için birçok seçenek sunar. Ana parametreler, Navigator düzeyinde screenOptions veya Screen düzeyinde options aracılığıyla ayarlanır. Geliştirici başlığı, geçiş animasyonunu, kaydırma hareketini, kart stilini ve arka plan karartmasını yapılandırabilir. Ayarların esnekliği, navigasyonun uygulamanın tasarım sistemine uyarlanmasına olanak tanır.

CardStyleInterpolator ile Özel Animasyonlar

JS Stack için cardStyleInterpolator, ekranlar arasında isteğe bağlı geçiş animasyonları oluşturmayı sağlar. Bu, benzersiz görsel efektler uygulamak için güçlü bir araçtır: ölçekleme, döndürme, paralaks, yatay çevirme. İşlev, geçerli animasyon ilerleme değerlerini (current, next) alır ve animasyonu yapılan öğeler için stiller döndürür.

TypeScript ile Navigasyon Tip Belirleme

Stack Navigator, TypeScript aracılığıyla tam tip belirlemeyi destekler. Bunun için RootStackParamList tanımlanır — anahtarları ekran adları ve değerleri parametre türleri olan bir nesne türü. Tip belirlemeden sonra navigation.navigate ve route.params otomatik tamamlama ve tür denetimi alır. Bu, derleme zamanında parametre aktarma hatalarını ortadan kaldırır.

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

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

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

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

Gelişmiş Senaryolar: Modal Pencereler ve Gruplar

Stack Navigator, ekran gruplamayı ve modal pencereleri destekler. Gruplar (Screen Group), tekrarlama olmadan birden çok ekrana ortak ayarlar uygulamayı sağlar. Modal pencereler, stack presentation: 'modal' aracılığıyla uygulanır — ekran, iOS'taki sistem modalı gibi arka plan karartmasıyla alttan açılır. Bu seçenek yalnızca Native Stack'te kullanılabilir.

Karmaşık navigasyon için Stack Navigator, bir Tab Navigator veya Drawer Navigator içine yerleştirilebilir. Örneğin, «Ana Sayfa» sekmesinin kendi ekran yığını ve «Profil» sekmesinin kendi yığını vardır. Navigatörlerin bu şekilde birleştirilmesi, üretim uygulamaları için standart yaklaşımdır. Her yığın yalıtılmıştır: bir sekme içindeki geri yığını diğer sekmeleri etkilemez.

// Tab Navigator'da iç içe 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>
  );
}

// Paylaşılan seçeneklerle ekran grupları
<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>