React Native
Özet - Tab navigasyonu
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.
Örnek çözümü göster
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.)
Örnek çözümü göster
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>
);
}
Kendini test et
-
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
Cevabı göster
options içine hem tabBarIcon hem tabBarBadge yazılır — options içine hem tabBarIcon hem tabBarBadge yazılır.
-
Sekme etiketini ayarla
options={{ title: "____", tabBarIcon: ... }}
Cevabı göster
options={{ title: "Ana Sayfa", tabBarIcon: ... }}
-
Kavramı rolüne eşle
- Bottom Tabs
- Alt sekmeler
- tabBarIcon
- İkon çizer
- tabBarBadge
- Rozet gösterir
- title
- Sekme etiketi
Sıradaki ders: Drawer navigator
