React Native
Tab badge
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.
Örnek çözümü göster
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.
Kendini test et
-
Bildirim rozeti ekle
options={{ tabBarBadge: ____ }}
Cevabı göster
options={{ tabBarBadge: 3 }}
-
Kavramı rolüne eşle
- tabBarBadge
- Bildirim rozeti
- options
- Özelleştirme
- null
- Rozeti gizler
- number
- Rozet değeri
-
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
- value bir sayı olduğunda
Cevabı göster
value null veya undefined olduğunda — tabBarBadge null veya undefined ise görünmez.
Sıradaki ders: Özet - Tab navigasyonu
