React Navigation 5 İle Routing İşlemleri Nasıl Yapılır?

Published in

Kodcular

5 min readMar 29, 2020

Bu yazının demo projesi GitHub’da bulunmaktadır — Demo projesinin bulunduğu GitHub Reposu → Repo

Merhaba arkadaşlar. Bu yazımda sizlere React native uygulamalarımızda React Navigation ile routing işlemlerini nasıl gerçekleştirebileceğimizden bahsetmek istiyorum.

Bu yazımda göstereceklerim kısaca şunlar olacaktır:

Routing Konfigürasyonları
Sayfalar Arası Geçiş İşlemi
Yönlendirme İşlemlerinde Veri Aktarımı
Bottom Tab Navigation Tanımlama
Drawer navigation Tanımlama

React Navigation 5.x örneğimize geçmeden önce 4.x versiyonunda routing işlemlerini nasıl yaptığımıza bakmak isterseniz React Native’de AsyncStorage Nedir? yazımı inceleyebilirsiniz.

Proje Kurulumu

Öncelikle bir react native projesi oluşturalım. Bunun için:

npx react-native init <proje_adi>

Projemiz hazır olduğunda, proje klasörüne gidelim ve React Navigation için gerekli olan paketleri yükleyelim.

npm install @react-navigation/native

Gerekli olan diğer dependency kütüphanelerin de kurulumunu gerçekleştirelim.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack

Projemizde bu kütüphaneleri kullanabilmek için react-native link komutunu çalıştıralım. (Eğer React Native’in 0.60+ versiyonunu kullanıyorsanız bu işlemi geçebilirsiniz)

Eğer bir Mac cihazda IOS için geliştirmeler yapıyorsanız, link işlemini tamamlamak için pod dosyalarını yüklemeniz gerekmektedir. Bunun için:

cd ios; pod install; cd ..

Tüm kurulumları gerçekleştirdikten sonra artık routing işlemleri için sayfa tanımlamalarına ve yönlendirme konfigürasyonlarını oluşturmaya başlayabiliriz.

Ekran Tanımlamaları

Öncelikle İki component oluşturalım. Bu iki component iki ayrı ekranı temsil etsin. Bunlardan birisi Home diğeri ise Profile isminde olsun.

Bu iki component’i screens klasörü altında tutalım.

/src
/screens 
 /Home      
  /index.js
 /Profile
  /index.js

Home ekranı (Home > index.js):

Profile ekranı (Profile > index.js):

Şimdi bu iki ekran arasında geçişleri sağlayabilmemiz için gerekli olan routing konfigürasyonlarını gerçekleştirelim.

src klasörü altında navigation klasörü oluşturalım ve yapacağımız tüm konfigürasyonları burada tutalım.

/src
/navigation
  /AppContainer.js
/screens 
 /Home      
  /index.js
 /Profile
  /index.js

Routing Konfigürasyonları

Neler yaptığımıza bakalım:

Elimizdeki ekranlar arasında geçişi sağlayabilmek için ekranları bir stack içersinde bulundurmamız gerekmektedir.

createStackNavigator ile sayfaların bir stack içerisinde bulunmasını sağlayabilirsiniz böylece siz her yeni bir sayfaya geçtiğinizde o sayfa, stack’ta en üste yerleştirilir (push). Bir önceki sayfaya gitmeniz durumunda o sayfa stack’tan çıkartılır (pop).

https://medium.com/dev-blogs/ds-with-js-stack-queue-d91fc8cea7a3

createStackNavigator bir fonksiyondur ve bize bir nesne döndürür. Bu nesne içerisinde 2 property bulundurmaktadır:

— Screen — Navigator

Navigator içerisinde stack ekranlarını bulundurur.

Screen ile stack’a bağlı olan ekranları tanımlarız.

Tanımlamış olduğumuz stack’ın çalışabilmesi için NavigationContainer altında bulunması gerekmektedir. NavigationContainer routing yönetiminden sorumludur.

initialRouteName: ‘Home’ ile uygulamanın açılış sayfasının Home sayfası olacağını belirtiriz.

Oluşturmuş olduğumuz stack’ı container içerisine ekledikten sonra bu container’ı export edelim. App.js içerisinde container’ı import ettikten sonra App componentimizin içerisinde kullanalım. Böylelikle uygulamayı çalıştırdığımız zaman, AppContainer içerisinde yapmış olduğumuz routing konfigürasyonları çalışmış olur.

Uygulamayı npm run ios veya npm run android diyerek çalıştıralım.

Eğer Home Screen yazısını görüyorsanız, React navigation ile oluşturmuş olduğumuz container başarılı bir şekilde entegre olmuş demektir.

Sayfalar Arası Geçiş İşlemi

Şimdi Home Component’ine bir buton ekleyelim ve butona tıklandığında Profile ekranının açılmasını sağlayalım.

React Navigation kurulumunu yaptığımız zaman, her component’in props’u içerisinde bir navigation property’si bulunur. navigation bize sayfa yönlendirmeleri dışında pek çok işlemi de yapma özelliği sağlar. Aşağıdaki linkten inceleyebilirsiniz.

React Navigation

Each screen component in your app is provided with the navigation prop automatically. The prop contains various…

reactnavigation.org

props içerisinde bulunan bir property kullanabilmek için her seferinde props.<property_name> gibi yazmak yerine, navigation property’sini Object destructing yöntemini kullanarak bir değişkene atadık.

Butona tıklandığında Profile sayfasına yönlendirme yapabilmek için navigation.navigate fonksiyonuna, Stack.Screen’de name property’sine verdiğimiz ekran ismini argüman olarak yazarız.

Yönlendirme İşlemlerinde Veri Aktarımı

Bir ekrandan başka bir ekrana geçiş yaparken veri aktarmamız gerekebilir. React Navigation ile bunu nasıl yapabileceğimize bakalım.

navigation.navigate içerisine ilk argüman olarak gitmek istediğimiz sayfanın ismini yazdık.
2. argüman olarak ise göndermek istediğimiz datayı JSON formatında yazarız.

Profil ekranında bu datayı alabilmek için React’ın props özelliğinden faydalanırız.

props’u konsola yazdıralım ve elimizde neler olduğuna bakalım.

Uygulama içerisinden Developer settings’i açalım ve daha sonrasında burada bulunan Debug modunu açalım.

Bu bize tarayıcıda yeni bir sekme açar. Tarayıcının Developer Tools’undan Console sekmesini açalım. Profile componentine yönlendirme yaptığımız zaman, console.log(props) ile props içerisinde neler olduğunu görebiliriz.

Gördüğünüz gibi React Navigation, Home ekranından göndermiş olduğumuz dataya, props içerisinde bulunan route.params ile Profile component’inden erişmemizi sağlar. Şimdi bu verileri değişkenlere atayalım ve sayfaya yazdıralım.

Dilerseniz bu şekilde params içerisinde bulunan datayı değişkenlere aktarabiliriz. Veya navigation işleminde belirttiğim gibi, JavaScript’in object destructing özelliğinden faydalanarakta bu verilere erişim sağlayabiliriz 🤩

Bottom Tab Navigation Tanımlama

History adında yeni bir ekran daha ekleyelim. History ve Home ekranlarını tab olarak nasıl tanımlayabiliriz bakalım.

/src
/screens 
 /Home      
  /index.js
 /Profile
  /index.js
 /History
  /index.js

History ekranı (History > index.js):

Cihazın alt kısmında tab’ları oluşturabilmemiz için öncelikle bottom-tabs kütüphanesini yükleyelim.

npm install @react-navigation/bottom-tabs

Bottom-tabs kütüphanesini yükledikten sonra navigation klasörü altında oluşturduğumuz AppContainer.js dosyamızda değişiklerimizi gerçekleştirelim.

Yüklemiş olduğumuz kütüphaneden createBottomTabNavigator’ı import edelim.

Profile ekranını tab olarak tanımlamak istemiyorsak ama yine’de Home ekranından Profile ekranına yönlendirmelere devam etmek için, Stack tanımlamamızı ayrı bir component’e taşımamız gerekmektedir. Bu yüzden HomeStackScreen adında bir component oluşturduk.

Stack’ta olduğu gibi, createBottomTabNavigator’da içerisinde Screen ve Navigator property’lerini bulunduran bir nesne döndürür. Navigator ve Screen ayarlamalarımızı yaptıktan sonra uygulamamızı çalıştırdığımız zaman Home ve History tab’larının oluştuğunu görebiliriz 🤩

Drawer Navigation Tanımlama

Son olarak, History ve Home ekranlarımızı bir Drawer’a nasıl taşıyabiliriz buna bakalım.

Öncelikle Drawer Navigation kütüphanesini yükleyelim.

npm install @react-navigation/drawer

Daha sonrasında AppContainer.js dosyamızda gerekli değişiklikleri yapalım.

createDrawerNavigator’ı import edip çağıralım. Tab ve Stack’ta olduğu gibi createDrawerNavigator’da içerisinde Navigator ve Screen property’lerinin bulunduğu bir nesne döndürür. NavigationContainer içerisinde Tab.Navigator ve Tab.Screen’leri, Drawer.Navigator ve Drawer.Screen olarak değiştirelim. Bu değişiklikleri kaydedip uygulamamızı çalıştırdığımız zaman Drawer’ın entegrasyonunu da başarılı bir şekilde sağlamış oluruz 🤩