createBottomTabNavigator
- React Native kursu
- Orta seviye
- Ders 48/116
- 5 dk
createBottomTabNavigator ile tab navigasyonu öğrenirsin.
createBottomTabNavigator kullanımı
createBottomTabNavigator, React Navigation'ın Bottom Tabs için sağladığı üretici fonksiyondur (factory). Çağırınca bir Tab nesnesi döndürür; bu nesne Tab.Navigator ve Tab.Screen bileşenlerini içerir. İçe aktarma: import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";.
Tipik kullanım: const Tab = createBottomTabNavigator();. Sonra <Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /></Tab.Navigator> yazarsın. Bu yapı, alt sekme navigasyonunun omurgasıdır. Tab.Navigator bir kapsayıcıdır; tüm sekmeleri saran üst bileşendir. Tab.Screen ise tek bir sekmeyi tanımlar. Bu ayrım, React Navigation'ın tüm navigator'larında aynıdır: Navigator + Screen çifti. Bu desen, koda tutarlılık katar.
Uygulama İki ekranlı Tab navigator yaz
Önceki dersteki gibi createBottomTabNavigator'ı içe aktar ve Tab'a ata. Sonra bir App bileşeni yaz. Dönüşte <Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Search" component={SearchScreen} /></Tab.Navigator> kullan. HomeScreen ve SearchScreen basit bileşenler olsun (sadece bir Text döndürsünler).
Başlangıç kodu
// alt sekme navigatorunu içe aktar; Tab'a ata
// Text'i react-native'den içe aktar
// HomeScreen ve SearchScreen bileşenlerini yaz (her biri bir Text döndürsün)
// App bileşeni yaz; dönüşte Tab.Navigator içinde iki Tab.Screen olsunÖ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 SearchScreen() { return <Text>Arama</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
</Tab.Navigator>
);
}Screen options
Her Tab.Screen, options prop'u ile özelleştirilir. Bu prop bir nesne alır; sekme etiketini, ikonu ve rengini ayarlamanı sağlar. Örnek: options={{ title: "Ana Sayfa", tabBarIcon: ... }}.
options nesnesi içinde en sık kullanılan alanlar şunlardır: title (sekme etiketi), tabBarIcon (ikon çizen fonksiyon), tabBarBadge (bildirim sayısı). Bu özelleştirme, uygulamanın marka kimliğine uygun bir görünüm kazanmasını sağlar. Sonraki derslerde ikon ve badge eklemeyi ayrı ayrı öğreneceğiz. options prop'u bir nesne döndüren bir fonksiyon da alabilir; bu, dinamik seçenekler için kullanışlıdır. Örneğin sekme odaklanmışsa farklı ikon göstermek gibi.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 createBottomTabNavigator'ı içe aktar
import { ____ } from "@react-navigation/bottom-tabs";import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";Açıklama: createBottomTabNavigator @react-navigation/bottom-tabs'tan içe aktarılır.
2 Tab.Navigator'ın rolü nedir?
<Tab.Navigator>...</Tab.Navigator>- Tek sekme tanımlar
- İkon ekler
- Skoru tutar
- Tüm sekmeleri saran kapsayıcıdır Doğru cevap
Açıklama: Tab.Navigator tüm sekmeleri saran kapsayıcıdır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
createBottomTabNavigator |
Tab nesnesini üretir |
Tab.Navigator |
Sekme kapsayıcısı |
Tab.Screen |
Tek sekme |
name |
Sekme adı |