React Native Tab Navigation
Birçok mobil uygulamada gördüğümüz tasarım ve kullanım rahatlığı açısından çokça tercih edilen bir yapıdan bahsedeceğim bu yazıda. Uygulama içerisinde tablar oluşturacağız ve bunları kontrol etmeyi öğreneceğiz. Önceki yazılarımda belirttiğim gibi React Navigation kütüphanesini kullanacağız. Kurulumu için buraya göz atabilirsiniz. Tab Navigation işlemlerini, bir önceki yazımda oluşturduğum Stack Navigation projemin üzerine ekleyeceğim.
Öncelikle terminalde aşağıdaki komutu çalıştırarak uygulamamıza tab kütüphanesini dahil edelim.
- npm install @react-navigation/bottom-tabs
Tabs isimli bir js doyası oluşturalım. Aşağıdaki gibi bir yapı elde etmemiz gerekiyor ama gelin bunların neler yaptığını ve nasıl yapacağımızı konuşalım.
Hatırlarsanız stack navigation kullanırken Navigation Container’ın navigation yönlendirmesinin çalışması için eklediğimizi söylemiştik. Dikkat edelim bunu 3. satırda import etmişiz. Aksi halde kullanamazdık.
Tab Navigator oluşturabilmek için createBottomTabNavigator kullanıyoruz. (Eklediğimiz kütüphaneden import etmeyi unutmayalım.) Değişkenimizin ismine Tab dedik. NavigationContainer’ın içine bir Tab.Navigator ekliyoruz ve içerisine ekranlarımızı eklemek için Tab.Screen oluşturuyoruz.
Her birini isimlendirmek için name değerlerini ekledik. Component kısmına ise ilgili tab etkinken hangi ekran görünecekse onu yazıyoruz. Yukarıdaki kodda 15. satırda componente bir stack verdim. MyStack, bir önceki yazıda stack navigation kullanımından bahsederken oluşturduğum yapı. Bu sayede tab navigation içerisinde stack navigation kullanımını da görmüş olduk.
3 tablı bir uygulama elde ettik. Fakat tasarım olarak eksikleri var. Şimdi bu eksikleri giderelim.
Tab Tasarımı Düzenlemesi
Her bir tab alanı için farklı düzenlemeler yapmak istiyorsak bu yola başvurmamız gerekir. Yukarıda Tab.Navigator oluşturduğumuz yere ufak bir değişiklik yapacağız.
Burada tab bar görünümü için CustomTabBar isimli yerdeki kullanımı baz almasını söylüyoruz.
Şimdi bu isimde bir js dosyası oluşturalım. Ben içeriğini aşağıdaki gibi oluşturdum.
Gelelim yukarıdaki kodun neler yaptığına.
- Öncelikle bir container View’ı oluşturduk. Stil özellikleri styles altındaki tabContainer içerisinde bulunmaktadır.
- Her bir tab alanı için yeni bir js dosyası oluşturmamız gerekiyor. Oluşturduğumuz componentleri çağırıyoruz ve bunlara bir önceki sayfadan aldığımız navigation parametresini, bulunduğumuz sayfada tanımladığımız iconSize ve style değerlerini parametre olarak gönderiyoruz.
Son olarak her tab alanının kendi içerisindeki düzenlemesini yapmak kaldı. Ben tab barı aşağıdaki gibi ikon ve tab isimleri koyarak özelleştirmek istiyorum.
İkon kullanabilmek için projemize bir kütüphane dahil etmemiz gerekiyor. Aşağıdaki komutu terminalde çalıştırarak ilgili kütüphaneyi kurabiliriz. (Daha sonra npm install veya yarn install yapmanız gerekebilir.)
- npm install — save react-native-vector-icons
Her tab için ayrı js dosyaları oluşturmuştuk ve isimlerini HomeTab, SecondTab, ThirdTab olarak vermiştik. Her biri için benzer işlemler yapılacağı için HomeTab üzerinde devam edelim.
Önce TouchableOpacity ile buton özelliği verdik ve tıklandığında gitmesini istediğimiz yeri navigation.navigate parantezlerinin içine yazdık. (Tabs.js’te her tab için bir name özelliği vermiştik. Tıklandığında açılmasını istediğiniz tabın name değerini yazmanız yeterlidir.)
İkon eklemek için 3. satırdaki gibi kütüphaneyi sayfaya dahil etmeliyiz. Daha sonra 16. satırdaki gibi ikonunuzu ekleyebilirsiniz. Ben altına bir de text yazdırdım.
Bu ve buna benzer şekillerde tab bar oluşturabilir ve dilediğiniz gibi özelleştirebilirsiniz.
Kodun tamamına şuradan erişebilirsiniz :
Yazımı buraya kadar okuduğunuz için teşekkür ederim. Bir sonraki yazıda görüşmek üzere :)
