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-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.
1 | this.props.navigation.navigate('Categories', { parentCategoryId: null }); |
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.
1 2 3 4 5 6 7 | this.props.navigation.navigate({ routeName: 'Categories', params: { parentCategoryId: 1 }, key: `Category_${item.id || 0}` }) |
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…
Üstteki yöntem react-navigation’ın eski sürümlerinde ihtiyaç karşılıyordu fakat yeni sürümlerde gördüğüm kadarıyla key adında bir property ile sorun çözülüyor eğer üstteki yöntem işinize yaramadıysa https://github.com/react-navigation/react-navigation/issues/2882 adresindeki önerilere de gözatabilirsiniz.
📚 Kaynaklar
✏️ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
seçilen yada tıklanlan değere göre nasıl sayfayı yönlendirebiliriz ?
örnek veriyorum map ile yada list component’iniz ile nesneler oluşturduğunuz onPress özelliğinin yer aldığı bir nesneye map ile yada list elementiniziniz renderItem gibi callback fonksiyonlarından erişebileceğiniz her bir listitem değerini elde edip onPress özelliğine kendi callback fonksiyonunuzu tanımlayıp bu callback fonksiyonu içerisinde eriştiğiniz item değerlerini kullanarak yönlendirme işlemini kolaylıkla yapabilirsiniz.