Mobil uygulamalarımızı geliştirirken bir süre sonra, birden fazla sayfa sunumuna ihtiyaç duyacağımızı göreceğiz. Buradaki en kritik detaylardan birisi de sayfalar arası geçişleri yönetmek olacaktır. Bu yazımızda bir uygulamadaki sayfa yapılarını oluşturmamızda ve yönetmemizde bizlere çok büyük kolaylık sağlayan React Navigation kütüphanesinin kurulumundan ve detaylarından bahsedeceğiz.
Kurulum
Öncelikle komut satırı aracılığı ile proje dizinine giderek aşağıdaki yüklemeleri yapıyoruz.
1 | npm install @react-navigation/native |
React Navigation bir çok yardımcı programlardan oluşur. Kurulumumuzu tamamlamak için aşağıdaki dependencies yüklemelerini de yapmamız gerekecek.
1 | npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view |
Eğer React Native tarafında 0.60 ve daha yüksek sürümünü kullanıyorsanız link işlemleri otomatik olarak yapılıyor, aksi halde link komutlarını da çalıştırmanız gerekecektir.
0.60 ve üzerinde bir sürüm kullanıyorsanız bu adımı geçebilirsiniz.
1 | react-native link react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view |
Not Yüklemeler sonrası eğer bağlantı konusunda hata alıyorsanız, projenizi tekrardan build etmenizde fayda olacaktır.
React Navigation ile uygulama geliştirirken tüm yapıları en son NavigationContainer içerisine sarmalamamız gerekiyor. Bunu genellikle App.js veya index.js gibi ana dosyalarımızda kullanmamız gerekecektir.
Daha fazlası için: - React Navigation 5.x Docs
Comments