Tab Navigator ( Tab Kullanımı – Tab View )

Tab Navigation ya da Tab View ya da direk Tab gösterimi, gelişmiş mobil uygulamalarda sıklıkla kullanılmaktadır.

Tek sayfada birden fazla sayfaya geçiş sağlayabilen, navigation kolaylığı oluşturan, bölümleme yaparak kodun ve uygulamanın düzenliliğini artıran ve son olarak görsellikte profesyonel bir etki yapan Tab bileşenini örnekle anlatmaya çalışacağız.

Bir uygulamamız olsun ve bu uygulamanın giriş/kayıt ol bölümünden sonra uygulamanın temel sayfalarını içeren bir tab view bölümümüz olsun. Bu tab bileşenlerinden de uygulamanın detay parçalarına geçiş olsun. Bunun için öncelikle bir giriş sayfamız olacak. Basit bir login sayfası yapalım.

Örnek Uygulama

Giriş yaptıktan sonra da uygulamanın ana bölümü tab view açılsın.

Tab bileşenindeki sayfalardan da detay sayfalara geçelim.

Navigator

Buradaki her sayfa normal bir sayfa olarak oluşturulmaktadır. Fakat bu sayfaların hangilerini tab hangilerini normal olarak kullanacağımızı navigator kısmında hallediyoruz. Bunun için tab view içerisinde kullanacağımız sayfaları Tab Navigator olarak tutarken diğerlerini Stack Navigator olarak tutuyoruz.

 

 

 

Örnek uygulamada Tab alanını ekranın alt tarafında tutmak için createBottomTabNavigator kullandık. Ekranın üst bölümünde Tab göstermek için ise createMaterialTopTabNavigator kullanılır.