Modern mobil uygulamalar çoğu zaman karşımıza tek bir ekran modeli ile çıkar. Ekranları sekmelere bölmek bu model için en çok başvurulan yöntemlerden bir tanesidir. Bu yazımızda React Navigation ile “Tab Navigator” kurulumuna ve kullanımına bakacağız.
Kurulum
- Not: @react-navigation/native ve diğer bağımlılıkların kurulu olduğundan emin olun, kurmadıysanız öncelikle bu sayfadaki adımları inceleyerek devam edin. Eğer kurduysanız bu adımı atlayabilirsiniz.
Tab Navigator Kurulumu:npm install @react-navigation/bottom-tabs
Kullanımı
// import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’
…
// const Tab = createBottomTabNavigator()
Örnek Kullanım:
Anasayfa, Keşfet ve Ayarlar adında 3 ayrı sayfamız olsun ve bu sayfalar için Tab Navigator aracılığı ile altta sekmeler oluşturalım.
Şimdi Tab.Navigator bileşenin altında kullanacağımız prop tanımları ile sekmelerimi özelleştirelim.
- initialRouteName:
Navigator ilk yüklendiği an varsayılan olarak açılacak ilk yolu belirtiriz. - screenOptions:
Navigator içerisindeki tanımladığımız ekranların varsayılan ayarlarını tanımlarız. - tabBarOptions:
tabBar objeleri için gerekli ayarların yapıldığı özellik. İçerdiği bazı proplar:
activeTintColor: Aktif olan sekmenin yazı rengi.
activeBackgroundColor: Aktif olan sekmenin arkaplan rengi.
inactiveBackgroundColor: Aktif olmayan sekme/sekmelerin arkaplan rengi.
inactiveTintColor: Aktif olmayan sekme/sekmelerin yazı rengi.
labelPosition: Yazının kullanılacak iconun neresinde duracağını belirtir. Varsayılan olara label iconun altındadır.
style: tab bar için stil tanımlamalarını içerir.
Icon Ekleme
Sekmelerimize kendi oluşturduğumuz iconları dahil edebileceğimiz gibi çeşitli hazır icon kütüphanelerinden de yararlanabiliriz. Biz bu örneğimizde reac-native-vector-icons altında gelen “Ionicons” icon modülünden yararlanacağız.
Ekran bileşenimizin desteklediği “option” propu içerisinde “tabBarIcon(focused: boolean, color: string, size: number)”‘a simgemizi içeren bileşenimizi tanımlıyıyoruz.
Örnek Kullanım:
Comments