React Navigation Kullanımı- Part 1

6 min readFeb 18, 2019

React Native ile bir süredir uğraşıyorsanız sayfalar arasında nasıl gezeceğinizi yada daha kompleks sayfaları nasıl oluşturacağınız kafanızı kurcalıyor olabilir. Bu yazımda başlıktanda anlaşılacağı üzere React Navigation kullanımını anlatacağım.

Kurulum

React Navigation kurulumu oldukça basit. paket yöneticisi tercihinize göre aşağıdaki gibi ekleyebilirsiniz.

yarn add react-navigation veyanpm install --save react-navigation

React-Navigation 3.0 ile birlikte küçük bir sürpriz ile geliyor. Bu sürpriz ise react-native-gesture-handler paketi. İsmindende anlaşılacağı üzere Gesture işleri için eklenen native bağımlılığı olan ilk paket. React Navigation v1 ve v2 de olan performans sorunlarını çözmek için eklenen bir paket.

Eski sürümlerin kurulum videolarını veya postlarını görüyorsanız muhtemelen kurulumunuz eksik kalacak

Projemize yine yarn veya npm kullanarak ekleyebiliriz bu paketide.

( Expo kullanıyorsanız eklemenize gerek yok. onların sülalesi rahat zaten :D )

yarn add react-native-gesture-handler npm install --save react-native-gesture-handler

Native bağımlığı olduguna göre bir link işlemi yapmamız değil mi ?

react-native link react-native-gesture-handler

BİTTİ Mİ ? HAYIR BİTMEDİ

Sadece iOS geliştiriyorsanız sıkıntı yok. Sizin işlem tamam ama Android’de lazım abi ne anladık o zaman Cross Platformdan diyorsanız aşağıdaki adımları izlemeniz lazım.

Bu pathteki android/app/src/main/java/com/appname/MainActivity.java dosyaya sadece + olan yerleri eklemeniz gerekiyor.

Bu kısım resmi dökümanda daha anlaşılır olabilir. Belki oraya bakmak isteyebilirsiniz.

Kullanım

Şimdi yavaş yavaş nasıl kullanacağımıza geçelim. Eğer web geliştiriciliğinden geliyorsanız biraz değişik gelecektir. ama aslında 3 tip navigation var stack,tab,drawer bir de yeni switch navigation var ama o da stack navigationun biraz özelleşmiş hali.

Basit bir örnekle başlayalım şimdi.

Örneklerde snack.expo.io’yu kullanacağım. Hiçbir kurulum gerektirmeden hızlıca sonuç görülebildiği için burda gördüğünüz kodları orda deneyebilirsiniz.

Yukardaki kodda gördüğünüz gibi react-navigation’dan createStackNavigator, createAppContainer’u import ettik.

createAppContainer : React Navigation 3.0 ile gelen yeni bir yapı. Eski sürümlerde herhangi bir navigation methodu root navigation olabiliyordu ama artık createAppContainer root olmak zorunda.

createStackNavigator : ismindende anlaşılacağı üzere stack sayfalar oluşturabiliyorsunuz. stack navigation webdeki push ve pop mantığına oldukça yakın. Fark olarak React Navigation’da iOS ve Android’te farklı olmak üzere geçiş animasyonları mevcut.(Bu animasyonları özelleştirebilirsiniz ama o ileri ki konularımızdan biri)

Eğer yukardaki kodu snack.expo.io ’da çalıştırırsanız göreceğiniz göreceğiniz ekran bu olacaktır.

Ee burda bir şey yok diyebilirsiniz. ama gözden kaçırmanınız gereken bir şey var. React Navigation bizim HomeScreen componentimizde herhangi bir Header kodu olmamasına rağmen Header’i uygulamamıza ekledi.

Bunların nasıl override edileceğini yazının ilerleyen kısımlarında bulabilirsiniz

Uygulamamızda şimdilik herhangi başka bir sayfa yok. Gelin şimdi ikinci bir sayfa ekleyip o sayfaya gidelim.

Yukardaki koddan göreceğiniz üzere DetailScreen adında bir component oluşturdum ve bunu AppNavigator’a ekledim.

Daha sonra ise HomeScreen’da eklediğim Butonuna tıklayarak DetailScreen’a navigate ettim.

onPress={() => this.props.navigation.navigate("Detail") }

Yukarda gördüğünüz gibi React Navigation platformlar için geçiş animasyonlarını native davranışına uygun olarak farklı yapıyor. Ayrıca Geri butonuda platforma özel olarak farklı oluyor.

Header kısmınıda tamamen özelleştirebilirsiniz o da yazımızın ilerleyen bölümlerinde yer alacak

Burdaki en önemli hususlardan biri this.props.navigation prop olarak sadece screen olarak tanımladığımız componente geçiyor. yani HomeScreen içerisine bir component tanımladık diyelim orda navigate etmek istersek bu şekilde hata verecektir.

Yukardaki kod hatayı göstermek için kullanılmıştır. Lütfen dikkat edelim. Durduk yere küfür yemeyelim.

Bu sorunu nasıl gidereceğiz. Bunun için benim şu ana kadar bildiğim gördüğüm 3 yöntem var.

yöntem Redux veya Mobx vs. bir state management kütüphanesi ile navigation statelerini tutmak ve actionlar ile istediğimiz yerden navigate etmek.
En üst navigationun referansını kullanarak istediğimiz navigation işlemini yapmak (React Navigation kütüphanesini yazan ekip bunu öneriyor) https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html Burdan okuyabilirsiniz (Belki bunun için ayrı kısa bir yazı yazabilirim)
En kolay ama her yerde işe yaramayan (Örneğin API için ayrı bir servis yapınız var ise)yol ise withNavigation High Order componenti. Bu component sadece React componentlerini wrap edip kullanabilirsiniz.

Şimdi bizim çalışmayan kodumuza döner isek HomeChild componentini withNavigation ile wrap ettik ve navigation eskisi gibi çalışmaya başladı.

Unutmadan söylemek gerekirse navigation’u props olarakta child componentlere geçebilirisiniz. ama componentler iç içe gittikçe takip etmesi bir o kadar zorlaşacaktır.

Şu ana kadar uygulamamızı bir sayfadan diğer bir sayfaya navigate etmeyi öğrendik. Şimdi bu sayfadan nasıl döneceğiz onu da öğrenmemiz gerekir. Çünkü her zaman Geri butonumuz olmayabilir. Bunun için aşağıdaki fonksiyonu kullanabiliriz. goBack() çağırdığımızda uygulamamız bir önceki sayfaya geri dönecektir.

this.props.navigation.goBack()

Bunun dışında dikkat etmemiz gereken diğer bir husus ise push ve navigate farkı aşağıdaki örneği çalıştırırsanız demek istediğimi daha iyi anlayabilirsiniz ama temel fark şu push’da bir sayfayı tekrar tekrar stack’a ekleyebilirsiniz ama navigate’de bir kere gidecek ve bir daha çağırsanız bile o sayfayı bir daha eklemeyecektir. V1 de gerçekten sorunlu olan yapıyı bu şekilde çözmüşler.

Sayfalar arası veri geçişi

Şu ana kadar stack navigasyonumuza route eklemeyi ve genel hataları gördük. Şimdi ise sayfalar arasında nasıl parametre geçişini yapabiliriz ona bakalım. yapısı oldukça basit.

Daha önceden this.props.navigation.navigate methodunu nasıl kullanacağımızı gördük ama sadece gideceği sayfanın adını vermiştik. Şimdi buna ikinci bir parametre olarak verdiğimiz nesneyi diğer sayfada yakalayabiliriz.

this.props.navigation.navigate('Detail', 
{
itemId: 86, 
otherParam: 'anything you want here'});

Geçtiğimiz parametreyi getParam fonksiyonu ile yakalayabiliriz. Eğer data geçmediysek default bir değerde verebiliriz.


const { navigation } = this.props;     
const itemId = navigation.getParam('itemId', 'NO-ID');     
const otherParam = navigation.getParam('otherParam', 'some default value');

Header’i yapılandırma

React Navigation her ne kadar default bir header sağlasada bunu configure etmek isteyebilirsiniz. Geri butonunu ,rengini, yada logonuz var ise onu bir şekilde oraya yerleştirmek isteyebilirsiniz. bunların dışında İç içe kullanıyorsanız navigationları örneğin Drawer içinde Stack. Üst navigationun Header’ini saklamak isteyebilirsiniz.

Şimdi burda iki farklı olay devreye giriyor. Biri sayfa bazında özelleştirme diğeri ise Navigation bazında özelleştirme

Aşağıdaki örnek sayfa bazında özelleştirmeye örnek.

Şöylede yapabilirdik.

Sayfalarda navigate edersek farklı farklı header oldugunu göreceğiz.

Tam Sayfa Modal oluşturma

Uygulamamızda bazen modal sayfasına ihtiyaç duyabiliriz. Şimdi bunu nasıl ekleyebiliriz ona bakalım. React Navigation henüz sayfa bazında modal yapmaya izin vermiyor. yani bu şu demek Bir tane stack navigationumuz var diyelim. Bu sayfalardan birini modal yapmak istediğimizde henüz bunun için bir yol yok.

Ama elimiz kolumuz bağlı değil. Aşağıdaki koda bakar isek iki tane stack navigation oldugunu göreceğiz. Bir tanesi uygulamamızın ilk gösterdiği stack diğeri ise RootStack olarak Modal ekranlarını uygulamamın en üst seviyesinde açmaya yarayan bir diğer stack. Burda MyModal sayfasına navigate ettiğimizde modal olarak navigate edecek ve diğer

Tab Navigation

Tab Navigation kullanımı oldukça basit. createBottomTabNavigator ile ekranlarımızı tab navigationa bağlayıp kullanabiliriz.

createMaterialTopTabNavigator veya createMaterialBottomTabNavigator ile Material design Tabbar oluşturabilirsiniz.

Tab Navigationda üzerinde durmamız gereken asıl olay her Tab’ta ayrı bir stack navigatior olması. Bu Tab-based uygulamalarda sıkça gördüğümüz bir yapı. Örneğin Facebook , Instagram ,Twitter (iOS uygulamaları Android’den emin değilim :) )

Aşağıdaki koddanda görebildiğiniz gibi her taba ayrı bir stack navigation koyabiliriz. Burda dikkat edilmesi gereken husus tabı değiştirip tekrar ziyaret ettiğimizde stackte kaldıgı yerden devam edecek olması. ama platformların gerçek davranışına bakacak isek iOS ta kaldığı yerden devam etmesi gerekir iken Android’de stacki resetlemesi gerekiyor.

Drawer navigation

Drawer navigation’u tab navigation gibi düşünebiliriz. tek farkı yan menu şeklinde açılması.

Drawer menüsü gesture hareketi ile açılabildiği gibi programatik olarakta açıp kapatabiliriz.

this.props.navigation.openDrawer(); this.props.navigation.closeDrawer();

yada aç-kapa yapabiliriz.

this.props.navigation.toggleDrawer();

Yazımızın ilk bölümü bu kadar bu kısım çok temel ve hiç React Navigation kullanmamış kişileri düşünülerek yazılmıştır. Kod örneklerinin birçoğu resmi dökümandan alınmıştır. Part 2 de bazı uygulamalar seçip bunların navigation kısmını React Navigation ile nasıl yapabiliriz onları yazacağım. Değinmemi istediğiniz başka konu var ise yorum bırakabilirsiniz.