React Native
Bottom Tabs
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ı.
Örnek çözümü göster
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.
Kendini test et
-
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
- Skor hesaplamak için
Cevabı göster
Ana bölümler arası geçiş için — Bottom Tabs ana bölümler arası geçiş için kullanılır.
-
Navigator bileşenini yaz
<____>
<Tab.Screen name="Home" component={HomeScreen} />
</Tab.Navigator>
Cevabı göster
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
</Tab.Navigator>
-
Kavramı rolüne eşle
- Bottom Tabs
- Alt sekmeler
- Tab.Navigator
- Sekme kapsayıcısı
- Tab.Screen
- Tek sekme
- React Navigation
- Navigasyon kütüphanesi
Sıradaki ders: createBottomTabNavigator
