CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

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.

Başlangıç kodu

App.js
// container'ı içe aktar
// App bileşenini container ile sar
function App() {
  return null;
}

Örnek çözüm

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

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

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 React Navigation ne sağlar?

  • Ağ isteklerini atmayı
  • Kalıcı veri saklamayı
  • Ekranlar arası geçişi Doğru cevap
  • Stil tanımlamayı

Açıklama: React Navigation ekran geçişlerini ve yönlendirmeyi yönetir.

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

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

Açıklama: NavigationContainer kök sarmalayıcı bileşenidir.

3 Eşleştir: paket ve görev

Kavram Anlamı
@react-navigation/native kök sarmalayıcı
@react-navigation/native-stack stack navigasyon
react-native-screens ekran optimizasyonu

Başlangıç bölümündeki tüm dersler

1 React Native temelleri

  1. React Native nedir?
  2. Expo kurulumu
  3. İlk bileşen
  4. App.js
  5. Çalıştırma
  6. Özet - React Native temelleri

2 JSX

  1. JSX nedir?
  2. İfadeler
  3. Bileşen ağacı
  4. Self-closing
  5. Koşullu render
  6. Özet - JSX

3 Bileşenler

  1. Fonksiyonel bileşen
  2. Props
  3. Çocuk bileşen
  4. Birden çok props
  5. Bileşen yeniden kullanım
  6. Özet - Bileşenler

4 Proje: Sayaç uygulaması

  1. Proje tasarımı
  2. useState
  3. Artır ve azalt
  4. TouchableOpacity
  5. Birleştirme

5 TextInput

  1. TextInput
  2. onChangeText
  3. controlled input
  4. placeholder
  5. Secure text
  6. Özet - TextInput

6 Stil

  1. style prop
  2. StyleSheet.create
  3. Renk ve font
  4. Margin ve padding
  5. border
  6. Özet - Stil

7 Flexbox

  1. flexDirection
  2. justifyContent
  3. alignItems
  4. flex
  5. flexWrap
  6. Özet - Flexbox

8 Butonlar

  1. Button
  2. TouchableOpacity
  3. Pressable
  4. onPress ve onPressIn
  5. disabled
  6. Özet - Butonlar

9 Proje: Yapılacaklar uygulaması

  1. Uygulama tasarımı
  2. Görev ekleme
  3. Görev listesi
  4. Görev tamamlama
  5. Birleştirme

10 Listeler

  1. FlatList
  2. renderItem
  3. keyExtractor
  4. SectionList
  5. List header ve footer
  6. Özet - Listeler

11 ScrollView

  1. ScrollView
  2. horizontal
  3. contentContainerStyle
  4. onScroll
  5. RefreshControl
  6. Özet - ScrollView

12 Görseller

  1. Image
  2. source
  3. resizeMode
  4. ImageBackground
  5. Görsel boyut
  6. Özet - Görseler

13 State

  1. useState
  2. State güncelleme
  3. Önceki state
  4. Çoklu state
  5. Obj state
  6. Özet - State

14 Olaylar

  1. onPress
  2. onLongPress
  3. Event parametre
  4. onLayout
  5. Form olayları
  6. Özet - Olaylar

15 Proje: Hava durumu

  1. Uygulama tasarımı
  2. Veri modeli
  3. Görüntüleme
  4. Şehir seçimi
  5. Birleştirme

16 Navigasyon

  1. React Navigation
  2. Stack navigator
  3. navigate
  4. params
  5. Geri butonu
  6. Özet - Navigasyon

17 Uyarılar

  1. Alert
  2. Alert butonları
  3. Toast
  4. Modal
  5. Modal animasyon
  6. Özet - Uyarılar

18 Platform

  1. Platform.OS
  2. Platform.select
  3. Platform.Version
  4. Dosya uzantısı
  5. Platform-specific bileşen
  6. Özet - Platform

19 Async Storage

  1. AsyncStorage
  2. setItem
  3. getItem
  4. removeItem
  5. JSON serialize
  6. Özet - Async Storage

20 Başlangıç finali

  1. Proje tasarımı
  2. Bileşenler
  3. State ve olaylar
  4. Navigation
  5. Birleştirme