Stack Navigator (Geçiş Yığınları)
React Native ile uygulama geliştirirken olmazsa olmazlarımızdan bir tanesi de geçiş yığınlarıdır (stack navigator). Bir sayfadan başka bir sayfaya geçişimizi saglamak için bu modülü kullanırız.
Uygulamalarımızda genellikle birden fazla sayfa olmaktadır. Bir sayfadan diğerine ondan bir başkasına geçiş yapmamız gerekebilir. Bu durumlarda bütün bu sayfaların olduğu sınıfları bir yığında tutarız. Bu yığını da geçiş yığınları olarak tanımlarız. Yani bu sayfalar arasında geçişler olacak deriz.
Geçiş yığınları sayfadan sayfaya atlamanın yanı sıra o sayfadaki ana hususları da belirtebilmemizi sağlamaktadır. Sayfaların başlık bilgilerini, başlık konumlarını, başlık arka planlarını belirtebiliriz. Şu sayfada geri tuşu olsun ama bu sayfada olmasın diyebiliriz. Sayfalarin bulundukları sınıfların isimleri yerine kendimizin daha iyi anlayacağı başka ifadeler kullanarabiliriz.
Tüm bunlar burada söylenirken kafada oturmayan kısımlar olabilir. Bunlar için de örnekler geliştireceğiz. Öncelikle iki sayfalı bir uygulama geliştirelim. Islemlerimizi iOS cihazda gerçekleştireceğiz.
Geçiş yigini kullanmak icin createStackNavigator modülünü kullanacağız. Bunun için de react-navigation modülünü eklememiz gerekmektedir. Bunun için alttaki komutu girmeliyiz.
npm install –save react-navigation
Şimdi ise iki basit sayfadan oluşan bir uygulama oluşturalım.
Iki tane basit sayfa geliştirdik. Şimdi stack navigator kısmında bunların birinin başlık bilgisini Başlık 1, digerininkini ise Başlık 2 olarak belirtelim.
Başlık 1 sayfasının başlık bölümünün arka planını kirmızı, başlık 2 sayfasının başlık arka planını mavi ve başlık yazısının fontunu küçültelim.
Başlık 2 sayfasında geri tuşunun yazısını değiştirelim.
Başlık 2 sayfasındaki geri tuşunun yazısını kaldıralım.
Görüldüğü üzere Başlık 2 sayfasına gelindiğinde başlık kısmında geri gitme tuşu bulunmaktadır. Şimdi onu kaldıralım.
Başlık 2 sayfasının geri tuşunun resmini değiştirelim.
Peki başlık bölümünü kaldırmak istersek nasıl yapacağız? Başlık bölümünü kaldırmaya çalışalım.
Örnek olarak şimdilik bu kadarı ile yetineceğiz. Fakat bu alanda yapılacak daha çok özellik olduğunu da belirterek yazıyı tamamlayalım.
Teşekkürler.
Selam. Stack navigator ile sayfalar arası geçiş yaparken ms lik bir duraksama oluyor device dan kaynakli olabilir diye düşünüp cihazda denemek istedigimde ayni duraksamayi yaşadığımı fark ettim bununla ilgili bir bilginiz mevcut mudur? Boş sayfalar arasi geçişte problem yok eğer içerik biraz dolu ise problem baş gösteriyor.
Selam,
Burada iki durum olabilir.
1- Sayfanızda çok fazla içerik vardır ya da çok fazla network işlemi vardır. Bu bir sebep olabilir.
2- Sayfanızın render bölümünde fazlalık işlemler mevcut olabilir ya da gereksiz state kullanımı olabilir.
Çözüm olarak önerebileceğim hususlar ise state gereksiz kullanımından kaçının. Uygulamanızın içeriğine göre redux kullanın.
Teşekkürler.
Merhaba, bir kaç gündür başımı ağrıtan bir problem var, forumlardaki her türlü çözüm önerisini denedim ama bir türlü halledemedim. Sorun şu ki Sign Up butonuna tıklayınca kayıt ekranına geçmek istiyorum ama
“undefined is not an object(evaluating ‘_this.props.navigation.navigate’)” hatası alıyorum, bunu bir türlü aşamadım. StartPage diye bir js dosyam var ve ilgili kısmın kodu şu;
this.props.navigation.navigate(‘Signup_Page’)}>
Sign Up
App.js dosyasında gerekli importları ve yönlendirmeleri yaptım ama sorun devam ediyor.
İyi çalışmalar.
Merhaba,
this.props.navigation.navigate(‘Signup_Page’) bunu kullandığınız yere bir fonksiyon girin mesela this.goToSingupPage. Sornasında goToSingupPage adında bir fonksiyon oluşturun. bunun içine this.props.navigation.navigate(‘Signup_Page’) koyun. Sonra contructor içine this.goToSingupPage = this.goToSingupPage.bind(this) yazın. Deneyin bakalım.