React Native ile Sayfa Geçişi (Navigation) Kod Örneği

📱 React Native ile Sayfa Geçişi (Navigation) Kod Örneği

🔧 Gerekli Kurulumlar

Öncelikle, react-navigation kütüphanesini ve gerekli bağımlılıklarını yükleyelim:

bashCopyEditnpm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated
npm install @react-navigation/native-stack

Not: Expo kullanıyorsan sadece şu komutu çalıştırman yeterli:

bashCopyEditnpx expo install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

📁 Dosya Yapısı

CopyEditApp.js
screens/
├── HomeScreen.js
└── DetailsScreen.js

🔤 App.js (Navigation Ayarı)

jsxCopyEditimport * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

🏠 HomeScreen.js

jsxCopyEditimport React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Burası Ana Sayfa</Text>
      <Button
        title="Detaylara Git"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  text: { fontSize: 24, marginBottom: 20 }
});

📄 DetailsScreen.js

jsxCopyEditimport React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function DetailsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Burası Detay Sayfası</Text>
      <Button
        title="Geri Dön"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  text: { fontSize: 24, marginBottom: 20 }
});

🔑 Anahtar Noktalar

• NavigationContainer: Navigation sisteminin çalışabilmesi için zorunlu sarmalayıcı.
• createNativeStackNavigator: Sayfalar arası yığılma (stack) yapısını yönetir.
• navigation.navigate("SayfaAdı"): Belirtilen sayfaya gider.
• navigation.goBack(): Önceki sayfaya döner.