Ders İçeriği
React Navigation Nedir?
React Navigation, React Native uygulamalarında sayfa geçişleri ve navigasyon yönetimi için en popüler kütüphanedir. Kullanıcıların uygulamanızın farklı ekranları arasında gezinmesini sağlar ve native navigasyon deneyimi sunar.
React Navigation'ın Avantajları:
- Platform-specific navigasyon deneyimi (iOS ve Android)
- Çoklu navigasyon türü desteği (Stack, Tab, Drawer)
- Kolay konfigürasyon ve özelleştirme
- TypeScript desteği
- Geniş topluluk desteği
Kurulum ve Temel Kurulum
React Navigation'ı projenize eklemek için aşağıdaki adımları takip edin:
1
Temel Paketlerin Kurulumu
React Navigation'ın temel paketlerini kurun:
npm install @react-navigation/native
2
Platform Bağımlılıklarının Kurulumu
Expo CLI kullanıyorsanız:
npx expo install react-native-screens react-native-safe-area-context
3
NavigationContainer Kurulumu
App.js dosyanızı NavigationContainer ile sarın:
import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { Text, View } from 'react-native'; export default function App() { return ( <NavigationContainer> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Merhaba React Navigation!</Text> </View> </NavigationContainer> ); }
Stack Navigator
Stack Navigator, en yaygın kullanılan navigasyon türüdür. Sayfalar bir yığın (stack) şeklinde üst üste eklenir ve kullanıcı geri butonuyla önceki sayfaya dönebilir.
1
Stack Navigator Kurulumu
Stack Navigator paketini kurun:
npm install @react-navigation/stack
2
Temel Stack Navigator Örneği
İki sayfa arasında geçiş yapan basit bir örnek:
import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { View, Text, Button, StyleSheet } from 'react-native'; // Ana Sayfa Bileşeni function HomeScreen({ navigation }) { return ( <View style={styles.container}> <Text style={styles.title}>Ana Sayfa</Text> <Button title="Detay Sayfasına Git" onPress={() => navigation.navigate('Details')} /> </View> ); } // Detay Sayfası Bileşeni function DetailsScreen({ navigation }) { return ( <View style={styles.container}> <Text style={styles.title}>Detay Sayfası</Text> <Button title="Ana Sayfaya Dön" onPress={() => navigation.goBack()} /> </View> ); } const Stack = createStackNavigator(); export default function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Ana Sayfa' }} /> <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Detaylar' }} /> </Stack.Navigator> </NavigationContainer> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20, }, });
Parametreler ile Navigasyon
Sayfalar arasında veri aktarmak için parametreler kullanabilirsiniz. Bu, dinamik içerik göstermek için çok kullanışlıdır.
// Parametre gönderme function HomeScreen({ navigation }) { return ( <View style={styles.container}> <Text style={styles.title}>Kullanıcı Listesi</Text> <Button title="Ahmet'in Profilini Gör" onPress={() => navigation.navigate('Profile', { userId: 1, userName: 'Ahmet', userAge: 25 })} /> <Button title="Ayşe'nin Profilini Gör" onPress={() => navigation.navigate('Profile', { userId: 2, userName: 'Ayşe', userAge: 30 })} /> </View> ); } // Parametre alma function ProfileScreen({ route, navigation }) { const { userId, userName, userAge } = route.params; return ( <View style={styles.container}> <Text style={styles.title}>Profil Sayfası</Text> <Text style={styles.info}>ID: {userId}</Text> <Text style={styles.info}>İsim: {userName}</Text> <Text style={styles.info}>Yaş: {userAge}</Text> <Button title="Geri Dön" onPress={() => navigation.goBack()} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20, }, info: { fontSize: 18, marginBottom: 10, color: '#34495e', }, });
Tab Navigator
Tab Navigator, uygulamanızın alt kısmında sekmeler oluşturur. Kullanıcılar farklı bölümler arasında hızlıca geçiş yapabilir.
1
Bottom Tab Navigator Kurulumu
Tab Navigator paketini kurun:
npm install @react-navigation/bottom-tabs
2
Tab Navigator Örneği
Alt sekmeli navigasyon örneği:
import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { View, Text, StyleSheet } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; // Ana Sayfa function HomeScreen() { return ( <View style={styles.container}> <Text style={styles.title}>Ana Sayfa</Text> <Text>Hoş geldiniz!</Text> </View> ); } // Arama Sayfası function SearchScreen() { return ( <View style={styles.container}> <Text style={styles.title}>Arama</Text> <Text>Arama yapabilirsiniz.</Text> </View> ); } // Profil Sayfası function ProfileScreen() { return ( <View style={styles.container}> <Text style={styles.title}>Profil</Text> <Text>Profil bilgileriniz burada.</Text> </View> ); } const Tab = createBottomTabNavigator(); export default function App() { return ( <NavigationContainer> <Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === 'Home') { iconName = focused ? 'home' : 'home-outline'; } else if (route.name === 'Search') { iconName = focused ? 'search' : 'search-outline'; } else if (route.name === 'Profile') { iconName = focused ? 'person' : 'person-outline'; } return <Ionicons name={iconName} size={size} color={color} />; }, tabBarActiveTintColor: '#3498db', tabBarInactiveTintColor: 'gray', })} > <Tab.Screen name="Home" component={HomeScreen} options={{ title: 'Ana Sayfa' }} /> <Tab.Screen name="Search" component={SearchScreen} options={{ title: 'Arama' }} /> <Tab.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profil' }} /> </Tab.Navigator> </NavigationContainer> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 10, }, });
Drawer Navigator
Drawer Navigator, yan menü (hamburger menu) oluşturur. Kullanıcılar ekranın kenarından kaydırarak veya menü butonuna tıklayarak menüyü açabilir.
npm install @react-navigation/drawer
import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { View, Text, StyleSheet } from 'react-native'; function HomeScreen() { return ( <View style={styles.container}> <Text style={styles.title}>Ana Sayfa</Text> <Text>Yan menüyü açmak için sol üst köşedeki menü butonuna tıklayın.</Text> </View> ); } function SettingsScreen() { return ( <View style={styles.container}> <Text style={styles.title}>Ayarlar</Text> <Text>Uygulama ayarları burada.</Text> </View> ); } const Drawer = createDrawerNavigator(); export default function App() { return ( <NavigationContainer> <Drawer.Navigator initialRouteName="Home" screenOptions={{ drawerStyle: { backgroundColor: '#f8f9fa', width: 240, }, drawerActiveTintColor: '#3498db', drawerInactiveTintColor: '#7f8c8d', }} > <Drawer.Screen name="Home" component={HomeScreen} options={{ title: 'Ana Sayfa', drawerIcon: ({ color }) => ( <Ionicons name="home-outline" size={22} color={color} /> ), }} /> <Drawer.Screen name="Settings" component={SettingsScreen} options={{ title: 'Ayarlar', drawerIcon: ({ color }) => ( <Ionicons name="settings-outline" size={22} color={color} /> ), }} /> </Drawer.Navigator> </NavigationContainer> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20, }, });
İç İçe Navigatorlar
Karmaşık uygulamalarda farklı navigasyon türlerini birleştirmeniz gerekebilir. Örneğin, Tab Navigator içinde Stack Navigator kullanabilirsiniz.
import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createStackNavigator } from '@react-navigation/stack'; import { View, Text, Button, StyleSheet } from 'react-native'; // Ana Sayfa Stack'i function HomeScreen({ navigation }) { return ( <View style={styles.container}> <Text style={styles.title}>Ana Sayfa</Text> <Button title="Detaylara Git" onPress={() => navigation.navigate('Details')} /> </View> ); } function DetailsScreen() { return ( <View style={styles.container}> <Text style={styles.title}>Detay Sayfası</Text> <Text>Bu bir detay sayfasıdır.</Text> </View> ); } // Profil Sayfası function ProfileScreen() { return ( <View style={styles.container}> <Text style={styles.title}>Profil</Text> <Text>Kullanıcı profili burada.</Text> </View> ); } const HomeStack = createStackNavigator(); const Tab = createBottomTabNavigator(); function HomeStackScreen() { return ( <HomeStack.Navigator> <HomeStack.Screen name="Home" component={HomeScreen} options={{ title: 'Ana Sayfa' }} /> <HomeStack.Screen name="Details" component={DetailsScreen} options={{ title: 'Detaylar' }} /> </HomeStack.Navigator> ); } export default function App() { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="HomeStack" component={HomeStackScreen} options={{ title: 'Ana Sayfa', headerShown: false // Stack navigator'ın kendi header'ını kullan }} /> <Tab.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profil' }} /> </Tab.Navigator> </NavigationContainer> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20, }, });
🎯 Navigasyon Metodları
| Metod | Açıklama | Örnek |
|---|---|---|
| navigate() | Belirtilen sayfaya git | navigation.navigate('Details') |
| goBack() | Önceki sayfaya dön | navigation.goBack() |
| push() | Yeni sayfa ekle (aynı sayfa bile olsa) | navigation.push('Home') |
| popToTop() | İlk sayfaya dön | navigation.popToTop() |
| reset() | Navigasyon geçmişini sıfırla | navigation.reset({...}) |
Sonraki Adımlar
Bu derste React Navigation ile sayfa geçişlerini öğrendiniz. Bir sonraki derste durum yönetimi konusunu ele alacak ve uygulamanızın verilerini nasıl yöneteceğinizi öğreneceksiniz.
Bu Derste Öğrendikleriniz:
- React Navigation kurulumu ve temel kullanımı
- Stack Navigator ile sayfa geçişleri
- Tab Navigator ile sekme oluşturma
- Drawer Navigator ile yan menü
- Parametreler ile veri aktarımı
- İç içe navigatorlar