React Native'de Navigation ve Ekranlar Arası Geçiş

IDE tarafinda: VS Code tarafinda projeyi actiginizda Explorer'da src/screens altindaki ekran bilesenlerini ve App.tsx icinde NavigationContainer + Stack.Navigator kurulumunu goruyorsunuz. Metro bundler entegre terminalde calisiyor.

Merhaba arkadaşlar, bu makalemizde React Native uygulamalarının belki de en sık ihtiyaç duyulan özelliklerinden biri olan Navigation (ekranlar arası geçiş) konusuna girecek ve React Navigation kütüphanesini en yaygın kullanım senaryolarıyla inceliyor olacağız. Stack, Tab ve Drawer navigation türlerini, ekranlar arasında parametre aktarmayı, custom header yapmayı ve daha fazlasını göreceğiz.

Neden Ayrı Bir Kütüphaneye İhtiyacımız Var?
Web'de bir tıklama ile yeni sayfaya geçmek basit (tarayıcı bunu halletmez mi zaten?). Ama mobil uygulamalarda durum farklı. Kullanıcılar:

- Önceki ekrana geri dönmek ister (geri tuşu)
- Ekranlar arasında yumuşak animasyonlar bekler
- Alt tab bar, drawer menü gibi navigasyon şablonları görür
- iOS'ta "swipe to go back" gestleri kullanır

Bu deneyimleri elle kodlamak çok iş. İşte bu sebeple React Native dünyası React Navigation kütüphanesini kullanıyor — fiili standart artık.

Kurulum
Expo projemizde kurulumu şöyle yapıyoruz:

npm install @@react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

npx expo install komutu, paketi Expo SDK versiyonunuza uyumlu şekilde kurar. Normal npm install kullanırsanız versiyon uyumsuzluğu olabilir.

Stack navigator için ek paket:

npm install @@react-navigation/native-stack

Bottom tab navigator için:

npm install @@react-navigation/bottom-tabs

NavigationContainer: En Dıştaki Sarmalayıcı
Uygulamanın en dış katmanını NavigationContainer ile sarmalamamız gerekiyor. Bu, tüm navigation işlemlerinin koordine edildiği yer:

// App.tsx
import { NavigationContainer } from '@@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Navigator buraya gelecek */}
    </NavigationContainer>
  );
}

Stack Navigator — Klasik Sayfa Yığını
En çok kullanılan navigasyon türü. Bir ekrana gittiğinizde o ekran yığının (stack) üzerine bindirilir, geri tuşuyla çıkarılır. iOS ve Android'in doğal davranışına benzer.

İki basit ekran yapalım:

// screens/AnasayfaEkrani.tsx
import { View, Text, Button, StyleSheet } from 'react-native';
import { NativeStackScreenProps } from '@@react-navigation/native-stack';

type RootStackParamList = {
  Anasayfa: undefined;
  Detay: { yaziId: number; baslik: string };
};

type Props = NativeStackScreenProps<RootStackParamList, 'Anasayfa'>;

export function AnasayfaEkrani({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text style={styles.baslik}>Blog Yazıları</Text>
      <Button
        title="İlk Yazıyı Oku"
        onPress={() => navigation.navigate('Detay', { yaziId: 1, baslik: 'Angular\'a Giriş' })}
      />
      <Button
        title="İkinci Yazıyı Oku"
        onPress={() => navigation.navigate('Detay', { yaziId: 2, baslik: 'React Native Nedir' })}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, gap: 10 },
  baslik: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
});

// screens/DetayEkrani.tsx
import { View, Text, Button, StyleSheet } from 'react-native';

export function DetayEkrani({ route, navigation }: any) {
  const { yaziId, baslik } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.baslik}>{baslik}</Text>
      <Text style={styles.meta}>Yazı #{yaziId}</Text>
      <Text style={styles.icerik}>
        Bu yazının içeriği burada gösterilir. Gerçek projede API'den çekerdik.
      </Text>
      <Button title="Geri Dön" onPress={() => navigation.goBack()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  baslik: { fontSize: 22, fontWeight: 'bold', marginBottom: 8 },
  meta: { fontSize: 12, color: '#94a3b8', marginBottom: 16 },
  icerik: { fontSize: 15, lineHeight: 24, marginBottom: 20 },
});

Şimdi App.tsx'te bunları birleştirelim:

import { NavigationContainer } from '@@react-navigation/native';
import { createNativeStackNavigator } from '@@react-navigation/native-stack';
import { AnasayfaEkrani } from './screens/AnasayfaEkrani';
import { DetayEkrani } from './screens/DetayEkrani';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Anasayfa">
        <Stack.Screen
          name="Anasayfa"
          component={AnasayfaEkrani}
          options={{ title: 'Blog' }}
        />
        <Stack.Screen
          name="Detay"
          component={DetayEkrani}
          options={({ route }: any) => ({ title: route.params?.baslik ?? 'Detay' })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Dikkat ettiyseniz options'ı hem statik obje hem de fonksiyon olarak geçebiliyoruz. İkinci kullanım (fonksiyon) sayesinde header başlığını route params'a göre dinamik yapabiliyoruz.

Parametre Gönderme ve Alma
Bir ekrana giderken navigation.navigate('Ekran', { params }) ile parametre gönderiyoruz. Alan tarafta route.params üzerinden alıyoruz. TypeScript ile tip güvenliği sağlamak için RootStackParamList tanımını baştan yapmak çok önemli — bu sayede geçersiz parametre yollarsanız derleyici uyarır.

Navigasyon Metodları
- navigation.navigate('Ekran', params) — Belirtilen ekrana git
- navigation.push('Ekran', params) — Aynı ekran olsa bile yığına yeni bir kopya ekle
- navigation.goBack() — Bir önceki ekrana dön
- navigation.popToTop() — İlk ekrana dön, aradaki her şeyi sil
- navigation.replace('Ekran') — Mevcut ekranı değiştir (login sonrası home'a geçerken iyi)
- navigation.setOptions({ title: 'Yeni' }) — Dinamik başlık değiştirme

Bottom Tab Navigator — Alt Tab Bar
Instagram, Twitter gibi uygulamalarda alttaki tab bar'ı görürsünüz. İşte o. Kurulumdan sonra:

import { createBottomTabNavigator } from '@@react-navigation/bottom-tabs';
import { Ionicons } from '@@expo/vector-icons'; // expo vector icons

const Tab = createBottomTabNavigator();

export function MainTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName: any = 'home';
          if (route.name === 'Blog') iconName = focused ? 'book' : 'book-outline';
          else if (route.name === 'Favoriler') iconName = focused ? 'heart' : 'heart-outline';
          else if (route.name === 'Profil') iconName = focused ? 'person' : 'person-outline';
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#f59e0b',
        tabBarInactiveTintColor: '#94a3b8',
      })}
    >
      <Tab.Screen name="Blog" component={BlogStack} />
      <Tab.Screen name="Favoriler" component={FavorilerEkrani} />
      <Tab.Screen name="Profil" component={ProfilEkrani} />
    </Tab.Navigator>
  );
}

tabBarIcon her tab için ikon döndürür, focused aktif tab'i temsil eder ve biz outline/filled ikonları buna göre gösteriyoruz. Bu tarz küçük dokunuşlar kullanıcı deneyimi için çok değerli.

İç İçe Navigator'lar
Gerçek uygulamalarda navigator'ları iç içe kullanırız. Alt tab bar var, her tab'in kendi stack navigator'ı var, stack'in içinde detay ekranları var:

// BlogStack.tsx
const Stack = createNativeStackNavigator();

export function BlogStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="YaziListesi" component={AnasayfaEkrani} options={{ title: 'Blog' }} />
      <Stack.Screen name="YaziDetay" component={DetayEkrani} />
    </Stack.Navigator>
  );
}

Bu şekilde tab içinde gezinirken alt tab bar kaybolmaz ama aynı tab içinde alt ekranlara inebilirsiniz.

Deep Linking ve URL
React Navigation, URL şeması (deep linking) da destekliyor. myapp://blog/42 gibi bir URL doğrudan ilgili ekrana açılabiliyor:

const linking = {
  prefixes: ['myapp://', 'https://semgoksu.com'],
  config: {
    screens: {
      Blog: {
        screens: {
          YaziListesi: 'blog',
          YaziDetay: 'blog/:yaziId',
        },
      },
      Profil: 'profil',
    },
  },
};

<NavigationContainer linking={linking}>...</NavigationContainer>

Bu yapıyı kurduktan sonra bildirimden gelen linkle, email'den gelen linkle, tarayıcıdan paylaşılan URL'le direkt ilgili ekrana açılabilirsiniz. Özellikle universal links (iOS) ve app links (Android) ile kombine edildiğinde çok güçlü bir özellik.

Programmatic Navigation — useNavigation Hook'u
Component'lerimize her seferinde navigation prop'unu geçirmek yerine, useNavigation hook'unu kullanabiliriz:

import { useNavigation } from '@@react-navigation/native';

export function AramaButonu() {
  const navigation = useNavigation<any>();

  return (
    <Pressable onPress={() => navigation.navigate('Arama')}>
      <Text>Ara</Text>
    </Pressable>
  );
}

İç bileşenler için çok pratik.

useFocusEffect — Ekran Her Odaklandığında
Bir ekran her odaklandığında (açıldığında veya geri dönüldüğünde) bir şey yapmak istiyorsak:

import { useFocusEffect } from '@@react-navigation/native';
import { useCallback } from 'react';

export function ProfilEkrani() {
  useFocusEffect(
    useCallback(() => {
      console.log('Profile odaklanıldı, veriyi güncelleyelim');
      // API çağrısı vb.
      return () => {
        console.log('Profile'den çıkıldı');
      };
    }, [])
  );

  return <Text>Profilim</Text>;
}

useEffect sadece mount'ta çalışırken, useFocusEffect ekran her görünür olduğunda çalışır. Bu fark çok önemli — örneğin kullanıcı profile sayfasına her geldiğinde son güncel bilgiyi çekmek için bunu kullanırız.

Dikkat Edilmesi Gereken Püf Noktaları
- Tip güvenliği: RootStackParamList'i baştan tanımlayın, TypeScript sizi korur.
- Büyük obje parametreleri: Params içine büyük objeler yerleştirmeyin. Bunun yerine ID gönderin ve alan ekran veriyi kendisi çeksin.
- NavigationContainer tek olmalı: Uygulamada yalnızca bir tane, en dışta.
- headerShown: false ile kendi custom header'ınızı yapabilirsiniz.

Özet
Bu makalede React Navigation'ın temel yapı taşlarını kapsamlı bir şekilde gördük: Stack, Tab, parametre aktarma, iç içe navigator'lar, deep linking ve programmatic navigation. Bu üç makalelik serinin sonuna geldik. Artık elinizde React Native ile gerçek bir uygulama yapmak için gereken temel araçların hepsi var: component, state, hook'lar ve navigasyon.

Sonraki adım olarak Redux Toolkit veya Zustand ile state yönetimi, AsyncStorage ile kalıcı veri saklama, Push Notification ve uygulama yayınlama konularına bakabilirsiniz. Bol kolay gelsin, mobil uygulama yolculuğunuzda başarılar dilerim. Sorularınızı yoruma yazın, cevaplamaya çalışırım...