React Native ile Routing işlemleri 2 => Tab navigation.

Bir çok uygulamada hatta bir çok demek doğru olmaz en popüler navigastion tipidir. Ekranın en alt kısımda genelde icon ile beraber olan ve genelde 3 yada 4 elemandan oluşan bir menü tipidir. Twitter bu konu için en çok konuyu anlamamıza yardımcı olacak örnek olabilir.

Yukarıda görmüş olduğunuz görsel üzerinden anlatmak en anlaşılır ve en kolay yöntem olacak diye düşünüyorum.Gördüğünüz gibi AnaSayfa , Arama , Bildirim ve Mesaj olarak 4 adet Tab bulunuyor. Her tab ayrı bir sayfayı temsil ediyor ve bu tablere her tıklandığında mevcut sayfa artık o tabin temsil ettiği sayfaya routing edilmiş oluyor.

Şimdi beraber TabNavigator kullanarak basit bir uygulama geliştirelim.

TabNav. kullanabilmek için öncelikle projemize aşağıda bulunan paketi yüklememiz gerekmekte.

npm install @react-navigation/bottom-tabs

Paketi yükledikten sonra projeyi yeniden başlatmanızı tavsiye ederim ek olarak android tarafında çalışmalar yaptığım için ben ek bir ayar yapmama gerek yok fakat ios tarafında çalışıyorsanız ufak bir ayarlama yapmanız gerekecek ayarlama denemez aslında uygulamanın sağlıklı çalışabilmesi için native Cocoapods kütüphanelerini kurmanız gerekli.

Kök dizinde iken aşağıda bulunan kodları uygulamanız yeterli.

cd ios
pod install
cd ..

Şimdi aşağıda bulunan gist üzerinden anlatımıma devam edeyim.
Öncelikle burada bulunan bütün kodları kopyalayıp App.js içine yapıştıralım ve tek tek beraber kodları inceleyelim.

Öncelikle Navigator yapısını kullanmamız için import etmemiz gereken kütüphane ve fonksiyon var.(Satır 3 ve Satır 4)
Yukarıda isimlerinden de anlayacağınız üzere Bir adet Container ve bir adet fonksiyonumuz var. NavigationContainer’i bir provider olarak düşünebilirsiniz. createBottomTabNavigator ise bir fonksiyon bu fonksiyon sayesinde bir navigation işlemlerimizi yapabilicez.

Öncelikle import etmiş olduğumuz createBottomTabNavigator’ı bir değişkene atayalım bu sayede erişebilelim.

const Tab = createBottomTabNavigator();

Daha sonra App Componentimizi import etmiş olduğumuz Provider ile saralım.

function App(){return (<NavigationContainer> ... </NavigationContainer>);}

Şimdi genel olarak bütün Navigation işlemlerinde bunu yapacağız daha sonra kullanmak istediğimiz Navigation yöntemini belirtmemiz gerekiyor bir BottomTabNavigation kullanıyoruz o zaman;

function App(){return (<NavigationContainer>  
   <Tab.Navigator>
       ...........
   </Tab.Navigator>
</NavigationContainer>);}

Şeklinde bir tanımlama yapmamız gerekiyor.
(Burada Tab bizim fonksiyona erişmek için atadığımız değişkenin adı isterseniz o değişkenin adını Router olarak atayın isterseniz adınız olarak atayın hiç fark etmez onun sayesinde istediğimiz yapılara erişebiliyoruz.)

Router yapımızı oluşturmak için ise Screen fonksiyonunu kullanmamız gerekiyor.

Screen Fonksiyonu 2 main api ihtiyacı duyar bunlar Name ve Component
Name : Dışarıdan navigation’a erişebilmemiz için gerekli olan takma isim diyebiliriz.
Component : O sayfada gösterilecek olan component.
https://reactnavigation.org/docs/screen (Daha açıklayıcı tanımlamalar ve daha fazla özelleştirilebilir api için mutlaka göz atın)

Basitçe yapısı ;

<Tab.Screen name="Home"  component={HomeScreen} />

Şimdi Bütün Router yapımızı tanımladığımız hale bi göz gezdirelim.
Gördüğünüz gibi hepsi tek bir BottomTabNavigator içinde ve birbirleri ile ilişkili bir durumda çalışıyor yani biz buradan istediğimiz şekilde Route değişikliği yapabiliriz.

<NavigationContainer>
  <Tab.Navigator>
   <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Settings" component={SettingsScreen} />
 </Tab.Navigator>
</NavigationContainer>

Uygulamamızı çalıştıralım;