React Native’de Büyük Ölçekli Navigasyon Mimarisi: React Navigation ve Expo Router Rehberi

Mobil uygulama dünyasında "büyük ölçekli" (large-scale) bir uygulama demek, sadece çok sayıda kullanıcı demek değildir; aynı zamanda yüzlerce ekran, onlarca farklı kullanıcı akışı (flow) ve karmaşık iş mantığı demektir. Bu tür projelerde navigasyon, uygulamanın iskeletidir. Eğer iskelet zayıfsa, proje büyüdükçe teknik borç (technical debt) altında ezilmeniz kaçınılmazdır.

Mimari Yaklaşım: Modüler ve Katmanlı Yapı

Büyük bir projede her şeyi tek bir App.tsx içinde toplamak felakete davetiyedir. İdeal bir mimaride navigasyon şu prensiplere dayanmalıdır:

• Flow Isolation: "Auth", "Onboarding", "Dashboard" gibi her ana akış kendi Navigator dosyasına sahip olmalıdır.
• Strict Typing: TypeScript ile tüm rota isimleri ve parametreleri tanımlanarak "undefined" hatalarının önüne geçilmelidir.
• Deep Linking Readiness: Uygulamanın her noktasına dışarıdan bir linkle erişilebilecek şekilde konfigürasyon yapılmalıdır.

1. React Navigation ile Profesyonel Mimari

React Navigation kullanırken en büyük hata, tüm ekranları tek bir devasa Stack.Navigator içine koymaktır. Bunun yerine "Nested Navigation" (İç İçe Navigasyon) yapısını kullanmalısınız.

Tip Güvenliği ve Merkezi Tanımlama

Önce rotalarımızı ve parametrelerimizi bir kontrat altına alalım:

// types/navigation.ts
export type RootStackParamList = {
  Auth: undefined;
  Main: undefined;
  NotFound: undefined;
};

export type AuthStackParamList = {
  Login: undefined;
  Register: { referralCode?: string };
  ForgotPassword: { email: string };
};

export type MainTabParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};
    

Modüler Navigator Yapısı

Her akışı kendi içinde kapsülleyerek yönetilebilirliği artırıyoruz:

// navigation/AuthNavigator.tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { AuthStackParamList } from '../types/navigation';

const AuthStack = createNativeStackNavigator<AuthStackParamList>();

export const AuthNavigator = () => (
  <AuthStack.Navigator screenOptions={{ headerShown: false }}>
    <AuthStack.Screen name="Login" component={LoginScreen} />
    <AuthStack.Screen name="Register" component={RegisterScreen} />
  </AuthStack.Navigator>
);
    

2. Expo Router: Yeni Nesil Dosya Tabanlı Navigasyon

Expo Router, React Native dünyasına Web standartlarını getiriyor. Büyük projelerde dosya hiyerarşisi, navigasyon hiyerarşisini belirler. Bu, özellikle kalabalık ekiplerde çakışmaları azaltır.

Gelişmiş Klasör Yapısı (App Directory)

Büyük ölçekli bir Expo Router projesinde dizin yapısı şu şekilde kurgulanmalıdır:

app/
├── (auth)/             # Kimlik doğrulama grubu
│   ├── login.tsx
│   ├── register.tsx
│   └── _layout.tsx     # Auth özelindeki ortak layout (ör. arka plan)
├── (main)/             # Ana uygulama grubu (Tab Bar)
│   ├── (home)/         # Home tab'i ve iç sayfaları
│   │   ├── index.tsx
│   │   └── [id].tsx    # Dinamik ürün detayı
│   ├── profile.tsx
│   └── _layout.tsx     # Tab Bar konfigürasyonu
├── _layout.tsx         # Global Root Layout (Providers, Error Boundary)
└── +not-found.tsx      # 404 sayfası
    

Dinamik Rotalar ve Tip Güvenliği

Expo Router'da dinamik rotalara erişim ve parametre yönetimi oldukça basittir:

// app/(main)/(home)/[id].tsx
import { useLocalSearchParams, useRouter } from 'expo-router';
import { View, Text, Button } from 'react-native';

export default function ProductDetail() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();

  return (
    <View>
      <Text>Ürün ID: {id}</Text>
      <Button title="Geri Dön" onPress={() => router.back()} />
    </View>
  );
}
    

Performans Optimizasyonu: Büyük Projelerde Dikkat Edilmesi Gerekenler

Projeniz büyüdükçe navigasyon geçişlerinde kasmalar hissedebilirsiniz. Bunu önlemek için:

• React Freeze: Arka planda kalan (odakta olmayan) ekranların render edilmesini durdurun.
• Detaching Screens: react-native-screens kütüphanesini kullanarak ekranları yerel (native) katmanda yönetin.
• Memoization: Navigasyon parametrelerini geçerken nesne oluşturmaktan kaçının, aksi halde ekran her seferinde gereksiz yere tekrar render olur.

Son Karar: Hangi Senaryoda Hangisi?

Sonuç olarak; eğer kontrolün tamamen sizde olmasını istiyorsanız ve karmaşık animasyonlar yapacaksanız React Navigation; ancak "Convention over Configuration" (Yapılandırma yerine standartlar) felsefesini benimsiyorsanız Expo Router sizin için en doğru büyük ölçekli çözüm olacaktır.