React Navigation Kullanımı

Bu yazıda react navigation kullanımından bahsedeceğim. React navigation, react native ile geliştirdiğimiz uygulamalarda sayfalar arasında gezinmemizi ve navigation option ları düzenlememizi sağlar. Kullanmak için projemize react-navigation ını kurup import etmemiz yeterlidir. React navigation 3 adet navigation tipi bulunmaktadır Stack-navigation, Draver-navigation ve tab navigation dır. Şimdi basit bir örnek ile kullanımını inceleyelim.

AppRouter.js

AppRouter.js diye bir dosya oluşturduk react-navigation ı import edip istediğimiz navigation tipini aldık .  AppRouter adında const değişken oluşturup stack navigation ını kullandık. Şimdi uygulamanın iki sayfası var main ve profile bunlar stackNavigator ile yönetilecek. StackNavigator da 2 sayfayıda tek tek tanımladık  tanımlarkende screen özelliğiylede o sayfada gösterilecek js i belirledik, gerekli js dosyalarınıda yukarıda import etmiştik.  İlk gösterilecek sayfayı ilk sıraya yazmamız yeterli istersekte initialRouteName ile default screeni belirleyebiliriz. Screenleri oluşturalım:

Main.js

Main.js dosyamızda en üstte navigationOptions da title ismini belirlemişiz, title header daki yazıyı belirliyor. navigationOptions da title, headerStyle gibi navigatörün görüntüsüne kadar düzenleyebiliyoruz. Render kısmında const değişken oluşturup gelen props lardan navigation daki navigate özelliğini almışız, navigate başka bir screen e yönlendirmemizi sağlıyor. Bir Buton oluşturup onpress ine profile sayfasına navigate et ve name isminde bir parametre göndermişiz diğer sayfaya navigate olduğunda gelen parametreyi alıp kullanabiliyoruz. Şimdide onu inceleyeyim:

Profile.js

En üstte navigationOptions var tite ı  gelen name parametresi yani Jane parametre olarak ne gönderirsek ona göre title dinamik olarak yazar. Render kısmında bu sefer navigation ın goBack özelliğini kullanmışız bu özellikte bir önceki sayfaya geri gitmesini sağlar. React navigation kullanarak basit bir uygulama yazdık bile option lar ile istediğiniz gibi özelleştire bilirsiniz. Yazdığımı kodların çıktısıda aşağıdaki gibi olacaktır.

react-native stack navigator

Makaleyi özetlersek react-navigation ın ne olduğundan, nasıl kullanıldığından, çalışma sisteminden, bazı özelliklerinin kullanımından, ekranlar arasında geçiş yapmayı ve geçişlerde parametre get set etme gibi konulardan bahsedildi. Makaleyi bir daha ki güncellenme de diğer navigation tiplerinin ve nested navigation sisteminden bahsedeceğim.

By Batuhan Akkaya
26 Temmuz 2017