Bir web sayfasında “a” elementi sayesinde herhangi bir URL’ye tıkladığımızda başka bir sayfaya yönlendirilip geçiş yapabiliriz. Tıkladığımız URL bilgisi tarayıcının geçmiş yığınına eklenir. Biz geri butonu ile yeniden o sayfaya ulaşmak istediğimizde tarayıcı bu yığın üzerinden URL’ye ulaşır ve bizi tekrar geldiğimiz sayfaya yönlendirir. React Native tarafında web tarayıcılarında olduğu gibi bir geçmiş yığını söz konusu değildir. React Navigation’ın devreye girdiği kısım ise burasıdır. En sık kullanacağımız navigatorlerden biri olan Stack Navigator sayesinde uygulamamızdaki ekranlar arasında geçiş yapabilecek ve geçmiş sayfa yönetimini sağlayabileceğiz.
React Navigation tarafında her bir navigator kendi kütüphanesi içerisinde yer alır. Şimdiye kadar kurulumunu yaptığımız bağımlılıklar React Navigation’ın navigatorler için temel yapı taşları idi.
Stack Navigator’ı kullanmaya başlamadan önce kurulumunu yapalım.
1 | npm install @react-navigation/stack |
createStackNavigator içerisinde aldığı parametreler ile bizlere geri dönüş tipi olarak bir React bileşeni döndüren bir fonksiyondur. Navigator içerisinde tanımlayacağımız Screen ögeleri sayesinde gerekli route tanımlamalarını sağlamış oluruz.
Örnek bir Stack Navigator yapısı
Burada Stack yapımızın iki farklı rotası vardır. Bunlar “Home” ve “Detail” sayfalarıdır. Screen bileşeni rotamızın adını belirleyeceğimiz bir “name” özelliği ile oluşturacağımız bileşeni tanımlayacağımız “component” özelliğine sahiptir.
-initialRouteName özelliğine vereceğimiz ekran değeri ile Stack yapımızda açılacak olan ilk sayfamızı belirtiriz. Örneğimizde bu özelliğe “Home” değerini verdik, eğer “Detail” olarak verseydik uygulamamızı ilk çalıştırdığımızda Detail sayfası ile karşılaşacaktık.
-screenOptions özelliği ile Stack yapımızdaki Screen’ler için varsayılan özellik atamaları yaparız.
Ekranlar Arası Geçiş
Stack içerisinde tanımladığımız başka bir route’a geçiş yapabilmek için this.props.navigation altındaki navigate(“RouteName”) özelliğini kullanırız.
Şimdi HomeScreen’e bir buton ekleyelim ve butona tıkladığımızda DetailScreen’a yönlendirelim.
-this.props.navigation.push(“RouteName”) ile bir route’a istediğimiz kadar geçiş isteği atabiliriz. Bu şekilde kaç defa geçiş işlemi yapıldıysa geri dönerken de aynı sayfa yapıları ile karşılaşılır.
-this.props.navigation.goBack() ile geçiş yapmadan önce bulunduğumuz sayfaya geri dönme işlemi yapılır.
-this.props.navigation.popToTop() ile geçişler arasındaki ilk sayfaya yönledirme işlemi yapılır.
Sayfalar Arası Parametre Gönderme
Stack Navigator ile rotalarımızı oluşturduk ve bunlar arasında nasıl gezebildiğimizi gördük. Şimdi ise bir sayfadan diğer sayfaya geçiş yaparken nasıl parametre aktaracağımızı görelim.
İlk olarak parametrelerimizi bir obje aracılığı ile “navigation.navigate() fonksiyonuna ikinci bir parametre olarak aktarırız.
Örnek: navigation.navigate(‘RouteName’, { /* parametre değerleri… */ })
Sonra ise Screen bileşenlerimizde bu değerleri route.params ile yakalayarak okuyabiliriz.
Örneğimizde HomeScreen’de yer alan bir buton aracılığı ile DetailScreen’e name, surname, age değerlerini parametre olarak gönderdik ve sayfamızda gösterdik.
Daha fazlası için: - React Navigation 5.x Docs
Comments