Özet - Tab navigasyonu
- React Native kursu
- Orta seviye
- Ders 52/116
- 5 dk
Bottom Tabs, icons ve badge'i birleştirerek bir 4 sekmeli uygulama yazarsın.
Özet - Tab navigasyonu
Bu grupta Bottom Tabs, createBottomTabNavigator, tab ikonları, Material Top Tabs ve tab badge'i öğrendin. Bottom Tabs altta sekmeleri gösterir; her sekme bir Tab.Screen'dir. tabBarIcon ile ikon, tabBarBadge ile bildirim rozeti eklersin.
Material Top Tabs üstte sekmeleri gösterir ve kaydırma ile geçiş yapar. Şimdi tüm bu parçaları birleştirip 4 sekmeli bir uygulama yazacaksın. Her sekmenin bir ikonu olacak; bir sekmede bildirim rozeti olacak. Bu, gerçek bir uygulamanın navigasyon omurgasını kurar. Adım adım ilerleyerek tüm öğrendiklerini bir araya getireceksin. Sonuç, kullanıcı dostu bir sekme yapısı olacak.
Uygulama 4 sekmeli uygulama yaz
Bir App bileşeni yaz. createBottomTabNavigator'ı içe aktar, Tab'a ata. Ionicons'u @expo/vector-icons'tan içe aktar. Dört basit bileşen yaz: HomeScreen, SearchScreen, ProfileScreen, NotificationsScreen (her biri bir Text döndürsün). App bileşeninde <Tab.Navigator> içinde dört Tab.Screen olsun. Her birine options={{ tabBarIcon: ({ color, size }) => <Ionicons name="..." color={color} size={size} /> }} ekle (Home: "home", Search: "search", Profile: "person", Notifications: "notifications"). NotificationsScreen'e ek olarak tabBarBadge: 3 ekle.
Başlangıç kodu
// alt sekme navigatorunu ve ikon setini içe aktar; Tab'a ata
// Text'i react-native'den içe aktar
// Home, Search, Profile, Notifications ekranlarını yaz
// App bileşeni yaz; dört Tab.Screen olsun; her birine ikon ekle; Notifications'a rozet ekleÖrnek çözüm
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { Text } from "react-native";
const Tab = createBottomTabNavigator();
function HomeScreen() { return <Text>Ana sayfa</Text>; }
function SearchScreen() { return <Text>Arama</Text>; }
function ProfileScreen() { return <Text>Profil</Text>; }
function NotificationsScreen() { return <Text>Bildirimler</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Tab.Screen name="Search" component={SearchScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="search" color={color} size={size} /> }} />
<Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} /> }} />
<Tab.Screen name="Notifications" component={NotificationsScreen} options={{ tabBarIcon: ({ color, size }) => <Ionicons name="notifications" color={color} size={size} />, tabBarBadge: 3 }} />
</Tab.Navigator>
);
}Uygulama Sekme etiketlerini özelleştir
Önceki dersteki 4 sekmeli uygulamayı genişlet. Her Tab.Screen'in options'una title ekle: Home için "Ana Sayfa", Search için "Arama", Profile için "Profil", Notifications için "Bildirimler". (Diğer ayarlar önceki çözümde.)
Başlangıç kodu
// Önceki 4 sekmeli uygulamayı yaz
// Her Tab.Screen'in options'una title ekle
// Home: "Ana Sayfa", Search: "Arama", Profile: "Profil", Notifications: "Bildirimler"Örnek çözüm
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { Text } from "react-native";
const Tab = createBottomTabNavigator();
function HomeScreen() { return <Text>Ana sayfa</Text>; }
function SearchScreen() { return <Text>Arama</Text>; }
function ProfileScreen() { return <Text>Profil</Text>; }
function NotificationsScreen() { return <Text>Bildirimler</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{ title: "Ana Sayfa", tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
<Tab.Screen name="Search" component={SearchScreen} options={{ title: "Arama", tabBarIcon: ({ color, size }) => <Ionicons name="search" color={color} size={size} /> }} />
<Tab.Screen name="Profile" component={ProfileScreen} options={{ title: "Profil", tabBarIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} /> }} />
<Tab.Screen name="Notifications" component={NotificationsScreen} options={{ title: "Bildirimler", tabBarIcon: ({ color, size }) => <Ionicons name="notifications" color={color} size={size} />, tabBarBadge: 3 }} />
</Tab.Navigator>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir sekmede hem ikon hem badge eklemek için ne yapılır?
<Tab.Screen options={{ /* ... */ }} />- Yalnızca tabBarIcon eklenir
- Yalnızca tabBarBadge eklenir
- İkisi aynı anda eklenemez
- options içine hem tabBarIcon hem tabBarBadge yazılır Doğru cevap
Açıklama: options içine hem tabBarIcon hem tabBarBadge yazılır.
2 Sekme etiketini ayarla
options={{ title: "____", tabBarIcon: ... }}options={{ title: "Ana Sayfa", tabBarIcon: ... }}Açıklama: title: "Ana Sayfa" sekme etiketini belirler.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
Bottom Tabs |
Alt sekmeler |
tabBarIcon |
İkon çizer |
tabBarBadge |
Rozet gösterir |
title |
Sekme etiketi |