Navigation

Tab ve Stack navigation'ı birleştirirsin.

Tab navigation

Bu derste uygulamaya iki ekran ekleyeceğiz: Görevler ve İstatistik. Tab.Navigator ile alt sekmeli bir yapı kurarız; kullanıcı sekmelere dokunarak ekranlar arası geçiş yapar.

React Navigation'ın createBottomTabNavigator'ı alt çubukta sekmeler çizer. <NavigationContainer> tüm navigator'ları saran üst bileşendir. Her ekranı <Tab.Screen name="..." component={...} /> ile tanımlarsın. Her iki ekran da useTasks ile context'ten tasks okur. Bu, veriyi her ekranda ayrı ayrı yüklemek yerine tek kaynaktan paylaşmanın gücünü gösterir.

Uygulama Tab.Navigator ekle

İki ekran bileşeni yaz: TasksScreen ve StatsScreen. Her ikisi de useTasks ile tasks okusun. TasksScreen <Text>Görevler: {tasks.length}</Text>, StatsScreen <Text>İstatistik</Text> döndürsün. App'in dönüşünü <NavigationContainer> ve <Tab.Navigator> ile sar; iki <Tab.Screen> ekle.

Örnek çözümü göster

import React, { useState, useEffect, createContext, useContext } from "react";
import { Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const TasksContext = createContext();

export function useTasks() {
  return useContext(TasksContext);
}

const Tab = createBottomTabNavigator();

function TasksScreen() {
  const { tasks } = useTasks();
  return <Text>Görevler: {tasks.length}</Text>;
}

function StatsScreen() {
  const { tasks } = useTasks();
  return <Text>İstatistik</Text>;
}

function App() {
  const [tasks, setTasks] = useState([]);
  useEffect(() => {
    fetch("https://api.example.com/tasks")
      .then((res) => res.json())
      .then((data) => setTasks(data));
  }, []);
  return (
    <TasksContext.Provider value={{ tasks, setTasks }}>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Görevler" component={TasksScreen} />
          <Tab.Screen name="İstatistik" component={StatsScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </TasksContext.Provider>
  );
}

İki ekran

İki ekranımız var. TasksScreen görev sayısını gösterir: <Text>Görevler: {tasks.length}</Text>. StatsScreen istatistik gösterir: <Text>İstatistik</Text>. Her ikisi de useTasks ile tasks'e erişir.

Tab navigation, her ekranın bağımsız çizilmesini sağlar. Sekmeler arası geçiş, ekran state'ini korur; veri kaybolmaz. tasks state'i context'te tutulduğu için her iki ekran da aynı veriyi görür. Bir ekranda veri değişse, diğeri anında güncellenir. Bu, context'in temel gücüdür. name prop'u sekme etiketini belirler; Türkçe veya İngilizce verebilirsin.

Kendini test et

Tab navigator'ı saran üst bileşen?
```
<NavigationContainer> ... </NavigationContainer>
```
- View
- ScrollView
- NavigationContainer
- SafeAreaView
Cevabı göster

NavigationContainer — NavigationContainer navigator'ı sarar.

Tab.Screen component

<Tab.Screen name="Görevler" component={____} />

Cevabı göster

<Tab.Screen name="Görevler" component={TasksScreen} />

Parçayı rolüne eşle

Tab.Navigator

Sekme yapısı
Tab.Screen

Tek ekran
NavigationContainer

Kök sarmalayıcı
name

Sekme etiketi

Sıradaki ders: Birleştirme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler