React Native ile Mobil Uygulama Geliştirme – 8 – React Native’de Tab Navigation Kullanımı

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 8. kısmıdır. Bir önceki makalede (Part 7), React Native’de kullanılan en iyi 10 kütüphaneleri ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Tab Navigation Kullanımı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Muhtemelen mobil uygulamalarda en yaygın gezinme tarzı sekme tabanlı gezinmedir. Mobil uygulamalarının ekranlarının altındaki veya üstteki başlığın altında (veya hatta bir başlık yerine) sekmeler olabilir.

Bu yazımızda Tab Navigation kullanmak için createBottomTabNavigator’ı kapsar. Ayrıca, uygulamanıza sekmeler eklemek için createMaterialBottomTabNavigator ve createMaterialTopTabNavigator’ı da kullanabilirsiniz.

Devam etmeden önce ilk olarak @ react-navigation/bottom-tabs yükleyin:

Tab Navigation Kullanımı Örneği

Ekran Görüntüsü:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Görünümü Özelleştirme

Bunu inceleyelim:

tabBarIcon, alt sekme gezgininde desteklenen bir seçenektir. Bu nedenle, onu options prop’undaki ekran bileşenlerimizde kullanabileceğimizi biliyoruz, ancak bu durumda, kolaylık sağlamak için simge yapılandırmasını merkezileştirmek için Tab.Navigator’ın screenOptions prop’una koymayı seçtik.
tabBarIcon, odaklanmış durum, renk ve boyut parametreleri verilen bir işlevdir. Yapılandırmada daha aşağıya bir göz atarsanız, tabBarOptions ve activeTintColor ve inactiveTintColor görürsünüz. Bunlar varsayılan olarak iOS platformu varsayılanlarıdır, ancak bunları buradan değiştirebilirsiniz. TabBarIcon’a aktarılan renk, odaklanan duruma bağlı olarak aktif veya pasif olandır (odaklanma etkindir). Boyut, sekme çubuğunun beklediği simgenin boyutudur.
CreateBottomTabNavigator yapılandırma seçenekleri hakkında daha fazla bilgi için tam API referansını okuyun.

Simgelere rozetler ekleyin

Bazen bazı simgelere rozetler eklemek isteriz. Bunu yapmak için tabBarBadge seçeneğini kullanabilirsiniz:

UI açısından bu bileşen kullanıma hazırdır, ancak yine de React Context, Redux, MobX veya etkinlik yayıcıları kullanmak gibi rozet sayısını başka bir yerden düzgün bir şekilde geçirmenin bir yolunu bulmanız gerekir.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

 

Tavsiye Edilen Yazılar

Henüz yorum yapılmamış, sesinizi aşağıya ekleyin!


Bir Yorum Ekle

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir