Navigation
- React Native kursu
- Orta seviye
- Ders 115/116
- 6 dk
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.
Başlangıç kodu
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();
// TasksScreen bileşenini yaz
// StatsScreen bileşenini yaz
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 }}>
<Text>Görevler</Text>
</TasksContext.Provider>
);
}Örnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Tab navigator'ı saran üst bileşen?
<NavigationContainer> ... </NavigationContainer>- View
- ScrollView
- NavigationContainer Doğru cevap
- SafeAreaView
Açıklama: NavigationContainer navigator'ı sarar.
2 Tab.Screen component
<Tab.Screen name="Görevler" component={____} /><Tab.Screen name="Görevler" component={TasksScreen} />Açıklama: Tab.Screen'in component prop'una TasksScreen verilir.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
Tab.Navigator |
Sekme yapısı |
Tab.Screen |
Tek ekran |
NavigationContainer |
Kök sarmalayıcı |
name |
Sekme etiketi |