React Navigation

React Navigation kütüphanesini öğrenirsin.

React Navigation nedir?

React Native'de ekranlar arası geçiş yapmak için React Navigation kütüphanesi kullanılır. Bu kütüphane; ekran yığınını (stack), sekmeleri ve çekmeceyi yönetir. Her ekran bir bileşendir; geçişler navigation nesnesi üzerinden yapılır.

React Navigation, React Native'nin çekirdeğine dahil değildir; ayrı bir paket olarak kurulur. Temel paket @react-navigation/native'dir. Expo projelerinde bağımlılıklar genellikle önceden yüklüdür, yine de açıkça kurmak iyi bir alışkanlıktır.

Paket kurulumu

React Navigation'ı kullanmak için önce @react-navigation/native paketini kurarsın. Stack navigasyon için ayrıca @react-navigation/native-stack gerekir. Expo ile kurulum: npx expo install @react-navigation/native @react-navigation/native-stack.

Bu paketlerin yanında react-native-screens ve react-native-safe-area-context bağımlılıkları da gerekir; Expo bunları otomatik ekler. Kurulumdan sonra NavigationContainer bileşenini içe aktararak kök sarmalayıcıyı oluşturursun.

Uygulama Sıra sende: App'i NavigationContainer ile sar

NavigationContainer'ı @react-navigation/native'den içe aktar. App bileşeninin döndürdüğü kök görünümü <NavigationContainer> ile sar.

Örnek çözümü göster

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

function App() {
  return (
    <NavigationContainer>
      {/* ekranlar buraya */}
    </NavigationContainer>
  );
}

Kendini test et

React Navigation ne sağlar?
- Ağ isteklerini atmayı
- Kalıcı veri saklamayı
- Ekranlar arası geçişi
- Stil tanımlamayı
Cevabı göster

Ekranlar arası geçişi — React Navigation ekran geçişlerini ve yönlendirmeyi yönetir.

Boşluğu doldur: NavigationContainer'ı içe aktar

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

Cevabı göster

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

Eşleştir: paket ve görev

@react-navigation/native

kök sarmalayıcı
@react-navigation/native-stack

stack navigasyon
react-native-screens

ekran optimizasyonu

Sıradaki ders: Stack navigator

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler