Tab badge
- React Native kursu
- Orta seviye
- Ders 51/116
- 5 dk
Tab badge ve notification öğrenirsin.
Tab badge
Tab badge, bir sekmenin köşesinde küçük bir sayı veya nokta gösterir. Bu, bildirim sayısını veya yeni içerik olduğunu belirtir. Örneğin okunmamış mesaj sayısı, yeni etkinlikler.
React Navigation'da Tab.Screen'in options prop'una tabBarBadge eklersin. Örnek: options={{ tabBarBadge: 3 }}. Bu, sekmenin sağ üst köşesinde bir "3" rozeti çizer. Değer bir sayı olabileceği gibi bir dize de olabilir. null veya undefined verirsen rozet görünmez. Bu özellik, kullanıcıyı yeni içeriğe yönlendirmenin görsel bir yoludur. Gerçek uygulamalarda rozet değeri genellikle bir state'ten veya API'den gelir; bildirim sayısı değiştikçe rozet güncellenir.
Uygulama Tab'a badge ekle
Önceki dersteki gibi createBottomTabNavigator'ı içe aktar, Tab'a ata. HomeScreen ve NotificationsScreen basit bileşenler olsun. App bileşeninde NotificationsScreen sekmesine options={{ tabBarBadge: 3 }} ekle. Diğer sekme için rozet olmasın.
Başlangıç kodu
// alt sekme navigatorunu içe aktar; Tab'a ata
// HomeScreen ve NotificationsScreen yaz
// App bileşeni yaz; NotificationsScreen'e bildirim rozeti ekle (değer 3)Örnek çözüm
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Text } from "react-native";
const Tab = createBottomTabNavigator();
function HomeScreen() { return <Text>Ana sayfa</Text>; }
function NotificationsScreen() { return <Text>Bildirimler</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Notifications" component={NotificationsScreen} options={{ tabBarBadge: 3 }} />
</Tab.Navigator>
);
}Dinamik badge
Gerçek uygulamalarda rozet değeri sabit değil, bildirim sayısından gelir. State kullanarak rozeti dinamik yaparsın. Örnek: options={{ tabBarBadge: unreadCount }}. Burada unreadCount bir state'tir.
Bildirim geldikçe setUnreadCount çağrılır; rozet otomatik güncellenir. Bu, kullanıcıya anlık geri bildirim verir. Rozet değeri 0 olduğunda React Navigation rozeti gizler. Bu davranış, kodu basitleştirir; unreadCount === 0 ? null : unreadCount yazmana gerek kalmaz. Dinamik rozet, uygulamanın canlı hissettiren bir parçasıdır. Bu desen, state ve navigasyonun birleştiği yerlerden biridir.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bildirim rozeti ekle
options={{ tabBarBadge: ____ }}options={{ tabBarBadge: 3 }}Açıklama: tabBarBadge: 3 sekmede 3 sayısını gösterir.
2 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
tabBarBadge |
Bildirim rozeti |
options |
Özelleştirme |
null |
Rozeti gizler |
number |
Rozet değeri |
3 tabBarBadge ne zaman görünmez?
options={{ tabBarBadge: value }}- value 0 olduğunda her zaman
- value bir dize olduğunda
- value null veya undefined olduğunda Doğru cevap
- value bir sayı olduğunda
Açıklama: tabBarBadge null veya undefined ise görünmez.