Switch Navigator ( Tek sayfa – Çok bölüm – Kimlik Doğrulama )

React Native ile geliştirilen uygulamalarda sayfalar arası geçişler navigator ile yapılır. Birden fazla navigator bulunmaktadır. Switch Navigator de bunlardan bir tanesidir. Peki ne zaman kullanırız?

Switch Navigator

Uygulamamızda kimlik doğrulama sayfaları bulunabilir. Bu sayfalardan diğer sayfalara geçiş yapıldığında tekrardan kimlik doğrulama sayfalarına geri dönülmemesi güvenlik bakımından gereklidir. Ayrıca kimlik doğrulama sayfalarındaki state elemanları da sıfırlanmalı. Işte tüm bu işlemleri otomatik olarak yapılmasını Switch Navigator kullanarak yapabilmekteyiz.

Switch Navigator ile tanımladığımız sayfalar tek sayfa olarak işlem görüyor diyebiliriz. Ama birden fazla sayfayı kullanabiliriz. Switch Navigator yığınının dışındaki bir sayfaya geçiş yapıldığında tekrardan geri dönülmez. En fazla uygulamadan dışarı çıkılır.

Örnek Uygulama

Uygulamamızda login, register, forgot password ve confirmation email sayfalarını Switch Navigator yığınına ekleyelim. Diğer sayfaları da Stack Navigator yığınına koyalım. Switch Navigator içerisindeki sayfalar kendi aralarında state değerleri tutularak gezilebilirken Stack Navigator yığınındaki bir sayfaya geçiş yapıldığında state değerleri resetlenir ve tekrar bu sayfalara geri dönülemez.

Örnek olarak Login sayfasını Stack yığınına atalım. Yine diğer sayfaları da Stack yığınına atalım. Daha sonra bunları Switch yığınına atıyoruz. Hepsi bu kadar.

React Native Stack Navigator

 

Örnek Kod
React Native Switch Navigator Kullanımı

Not: Switch Navigator içerisindeki sayfaları önce Stack Navigator içerisine attık fakat bu mecburi değildir. Direk olarak Switch Navigator içerisine de atabiliriz. Burada sadece iki navigatorü de göstermek için kullanıldı.

Teşekkürler.