Bottom Tabs
- React Native kursu
- Orta seviye
- Ders 47/116
- 5 dk
Bottom Tabs navigator öğrenirsin.
Bottom Tabs nedir?
Bottom Tabs, ekranın altında sekmeleri gösteren bir navigasyon desenidir. Kullanıcı bir sekmeye dokunup ilgili ekrana geçer. Instagram, Twitter, YouTube gibi uygulamalar bu deseni kullanır.
React Navigation kütüphanesi, Bottom Tabs'ı createBottomTabNavigator ile sağlar. Bir Tab.Navigator bileşeni içinde her sekme için bir Tab.Screen yazarsın. Sekme sırası, Tab.Screen'lerin yazım sırasına bağlıdır. Bu desen, ana uygulama bölümlerini birbirinden ayırmak için uygundur: ana sayfa, arama, profil gibi. Her sekme kendi Stack'ini tutabilir; kullanıcı bir sekmeden diğerine geçince önceki sekmenin durumu korunur. Bu, akıcı bir kullanıcı deneyimi sağlar.
Uygulama createBottomTabNavigator çağır
Bir Tab nesnesi oluştur. createBottomTabNavigator'ı çağırıp sonucu Tab'a ata. Bu, React Navigation'dan içe aktarılmalı.
Başlangıç kodu
// alt sekme navigatorunu @react-navigation/bottom-tabs'tan içe aktar
// Tab değişkenine navigator üreten fonksiyonu ataÖrnek çözüm
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
const Tab = createBottomTabNavigator();Sekme ve ekran
Her sekme bir Tab.Screen ile tanımlanır. İki zorunlu prop'u vardır: name (sekme adı, dize) ve component (o sekme seçilince gösterilecek bileşen). Örnek: <Tab.Screen name="Home" component={HomeScreen} />.
name prop'u hem sekme etiketinde hem navigasyon referansında kullanılır. component ise o sekme için render edilecek React bileşenidir. Birden çok Tab.Screen eklersen hepsi Tab.Navigator içinde sırayla görünür. Sekmeler arası geçiş, kullanıcı sekmeden sekmede dokununca otomatik yapılır; senin ek kod yazman gerekmez. Bu yapı, ana bölümleri temiz bir biçimde ayırmanın standart yoludur. Sonraki derslerde ikon, badge ve özel stiller ekleyeceğiz.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bottom Tabs hangi amaçla kullanılır?
<Tab.Navigator>...</Tab.Navigator>- API çağrısı yapmak için
- Stil vermek için
- Ana bölümler arası geçiş için Doğru cevap
- Skor hesaplamak için
Açıklama: Bottom Tabs ana bölümler arası geçiş için kullanılır.
2 Navigator bileşenini yaz
<____>
<Tab.Screen name="Home" component={HomeScreen} />
</Tab.Navigator><Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
</Tab.Navigator>Açıklama: Tab.Navigator Bottom Tabs kapsayıcısıdır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
Bottom Tabs |
Alt sekmeler |
Tab.Navigator |
Sekme kapsayıcısı |
Tab.Screen |
Tek sekme |
React Navigation |
Navigasyon kütüphanesi |