React Navigation Recursive Yönlendirme İşlemi Nasıl Yapılır?

React Navigation Recursive Yönlendirme, Bu makalede react-native de ilk defa ihtiyacım olan bir durumdan dolayı react-navigation ile takıldığım bir noktayı çözümü ile beraber sizinle paylaşıp aynı sorunu yaşayabilecek arkadaşlara yol göstermesini umuyorum. Sorunu özet olarak anlatmak gerikse aynı ekranın kendini sürekli çağırması yani backend geliştirmede bir metodun kendini çağırması olayı gibi düşünüldüğünden recursive ifadesi kullanılmıştır. Bizde bu recursive işlemini react-native de ekranların kendilerini çağırma işlemini react-navigation kütüphanesi kullanılarak nasıl yapılabildiğine gözatacağız.

React Navigation Recursive Yönlendirme İşlemi Nasıl Yapılır?

React Navigation İle Aynı Sayfa İçin Recursive işlem Nasıl Yapılır?

React-native projenizde ekranlar arası geçiş için bir routing aracı kullanmanız gerekiyor bu react-routing, react-navigation yada farklı routing paketide olabilir ama bu makalede üzerinde durulacak olan react-navigation paketi ile nasıl aynı sayfaya tekrar tekrar yönlendirme yapılabileceğini göstereceğiz.

Normalde react-navigation paketi yüklü bir react-native projesinde yönlendirme işlemi alttaki gibi tek satırda gerçekleştirilebiliyor.

Adı parentCategoryId ve değeri null olan 1 adet parametresi bulunan ve Categories adında routeName’e sahip ilgili ekrana yönlendirmeyi sağlıyoruz ve bu yönlendirme sağlandıktan sonra alt kategoriye tıklandığında tekrar aynı ekrana parentCategoryId’si farklı şekilde yönlendirme yapmaya çalıştığınızda kodun çalışmadığını, konsola bir hata fırlatılmadığını ve kendinizi herşeyin doğru gittiğini sandığınız bir olayın içerisinde sanarsınız ama kod neden çalışmıyor karmaşasında kalabileceğiniz bir durum ile karşı karşıya kalıyorsunuz ayrıca bu yönlendirdiğiniz sayfanın sonsuz alt kategori kırılıma sahip bir kategori yapısı olduğunu düşünün bu durumda 50 kırılım için hepsine özel sayfa tasarlayamayız Category1, Category2…Category50 diye onun için bu konuda bir ihtiyaç olabileceği düşünülmüş ki döngülerde kullanılan mantık gibi her bir eleman’a güncelleme sonrası oluşacak performans maliyetini önlemek için sadece ilgili liste elemanının güncellenmesi açısından key attribute’ünü kullanıyorduk aynı şekilde aynı sayfaya birden fazla yönlendirme gereken durumlarda alttaki gibi key özelliğine benzersiz olabilecek bir değer set ederek kolaylıkla yönlendirmeyi sağlayabiliyorsunuz fakat liste elemanlarında söz konusu tekrar gereksiz render’ı engelemek burada ise aynı sayfaya yönlendirme sağlanırken key ile aslında performans ile ilgili işlem yapmayıp sadece recursive bir işlem için zorunluluk olan bir durumu gerçekleştirmiş oluyorsunuz.

Soruna ait ekran görüntüsü ise alttaki görüntüde yer almaktadır.

Gördüğünüz gibi hangisine tıklarsam tıklayayım işlemi gerçekleştirmiyor ve aynı sayfaya üstteki kod ile tekrar yönlendirme sağlayamıyorum 🙁

Peki o zaman hemen hızlıca bu kodundaki çözüme gözatalım.

Gördüğünüz gibi key değerine Category_1,Category_2… olacak şekilde üretilen bir benzersiz key oluşturmasını sağladık. Böylelikle kolaylıkla aynı sayfaya birden fazla yönlendirme yapmamıza izin verilmiş oldu.

Hemen neyi gerçekleştirebildiğimize bir bakalım.

İnşallah olayı basit bir şekilde anlatabilmişimdir, başka bir makalede görüşmek dileğiyle…

React Navigation Recursive Yönlendirme İşlemi Nasıl Yapılır?
5 (100%) 1 oy

Bunlar da hoşunuza gidebilir...

Kimler Neler Demiş?

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Bildir