React Native'de Navigasyon: React Navigation 5 ile Uygulama Yönlendirme

Mobil uygulamalarda navigasyon, kullanıcıların farklı ekranlar arasında geçiş yapmasını sağlar. React Navigation 5, React Native uygulamalarında esnek ve özelleştirilebilir navigasyon çözümleri sunar.

Gerekli paketleri kurun:

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

Platforma özel kurulum adımlarını uygulayın.

Ana navigatörü oluşturun:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

Navigasyon propunu kullanarak ekranlar arasında geçiş yapın:

function HomeScreen({ navigation }) {
  return (
    <Button
      title="Detaylara Git"
      onPress={() => navigation.navigate('Details')}
    />
  );
}

Ekranlara parametre aktarabilirsiniz:

navigation.navigate('Details', { itemId: 86 });

Parametreyi alan ekranda:

route.params.itemId

• Tab Navigator: Alt menü sekmeleri için.
• Drawer Navigator: Yan menü çekmecesi için.

Navigatör ve ekranların görünümünü özelleştirebilirsiniz:

<Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#f4511e' } }}>

Ekran başlıklarını ve header butonlarını dinamik olarak ayarlayabilirsiniz:

navigation.setOptions({ title: 'Yeni Başlık' });

Uygulamanızı derin bağlantılar ve özel URL şemaları ile entegre edebilirsiniz.

• React Navigation DevTools ile navigasyon durumunu izleyin.
• Hataları çözmek için logları ve hata mesajlarını inceleyin.

• Navigasyon yapısını planlayın ve modüler hale getirin.
• Performansı optimize etmek için lazy loading kullanın.

React Navigation 5, React Native uygulamalarınızda güçlü ve esnek navigasyon çözümleri sunar. Kullanıcı deneyimini iyileştirmek ve uygulamanızı daha kullanışlı hale getirmek için bu kütüphaneyi etkili bir şekilde kullanabilirsiniz. Atalay Tech olarak, mobil uygulama geliştirme konusundaki uzmanlığımızla yanınızdayız. Daha fazla bilgi için bizimle iletişime geçin.