React Native Stack Navigation

Bir React Native projesinde sayfalar arası geçişi sağlamak için React Navigation veya benzeri bir kütüphane kullanmamız gerekiyor. Bir önceki yazımda React Navigation kurulumundan bahsetmiştim. Yazıya ulaşmak için tık :)

React Navigation 3 ana başlıktan oluşmaktadır.

• Stack Navigation
• Tab Navigation
• Drawer Navigation

Bu yazıda size Stack Navigation kullanımından bahsedeceğim.

React Navigation kurarak projemize yönlendirme kullanacağımızı söyledik ama hangisini kullanacağımızı söylemedik. Projenin de bunu öğrenip yazdığımız kodları anlayabilmesi için Stack Navigation kurulumunu yapmamız gerekiyor. Terminalde aşağıdaki komutu çalıştırdığımızda kurulumu kendisi yapacaktır.

npm install @react-navigation/stack

Kütüphaneyi kurduktan sonra öncelikle npm install ve ios tarafı için pod install yapmamız gerekiyor. Daha sonra bir ekran oluşturalım ve adına FirstScreen.js diyelim. Bunun gibi iki ekran daha oluşturup onlara da SecondScreen.js ve ThirdScreen.js diyelim.

Şimdi bu ekranları bir stack haline getirmemiz gerekiyor. Karışıklık olmaması ve tek yerden yönetilmesi için ben MyStack.js adında bir js dosyası oluşturalım.

Yukarıdaki kodda görüldüğü üzere createStackNavigator kullanarak bir stack oluşturalım ve adına “Stack” diyelim. Bu ismi kendinize göre değiştirebilirsiniz.

NavigationContainer, stack yönlendirmesinin çalışması için gereklidir. İçerisinde Stack.Navigator altına ekranlarımızı ekleyelim. Name alanı, o ekranı çağıracağınız isimdir. İsimlendirmeyi anlaşılır yapmak karışıklığı önleyecektir. Component ise başta oluşturduğumuz ekranlarımızın isimlerini yazdığımız kısımdır.

Stack’in hangi ekrandan başlayacağına initialRouteName ile karar verilir. Eğer initialRouteName yazılmazsa ilk sıradaki ekran başlangıç olarak kabul edilir.

MyStack.js, App.js’e eklenmeli ki kodun ne yaptığını emülatörde görebilelim. App.js’i aşağıdaki şekilde düzenleyelim.

Şimdi oluşturduğumuz ekranları düzenleyelim.

FirstScreen.js

Kodu biraz açıklamak gerekirse; bir buton ekledik ve tıklandığında SecondScreen’e yönlendirmek istiyoruz. Bunun için bulunduğumuz ekrana önce navigation kullanacağımızı söylememiz gerekiyor. Kodda bunu yaptığımız yer:

const navigation = useNavigation();

TouchableOpacity’e tıkladığımda SecondScreen’e gitmek istiyorum. Bunu yapmamızı sağlayan kod:

navigation.navigate(‘Second’)

Burada dikkat etmemiz gereken kısım, stack oluştururken name kısmına ne yazdıysak o şekilde çağırmamız gerektiği. Ekranın ismi SecondScreen fakat name olarak Second demiştik.

Başlıca Navigation Kullanımları

navigation.navigate(‘ScreenName’): ScreenName isimli sayfaya yönlendirir.

• navigation.goBack(): Navigate ile gittiğimiz ekrandan bir önceki ekrana geri dönmemizi sağlar.
• navigation.push(‘ScreenName’): ScreenName isimli sayfaya yönlendirir. Navigate’ten farkı, stackte olsa bile bulunduğumuz ekranın üstüne yeni bir ekran açar. Push, ekranın stackte olup olmadığına bakmaz. Navigate ile stackte olan bir sayfaya yönlendirirsek o ekrana geri dönmüş olur.
• navigation.pop(): Push ile gittiğimiz ekrandan bir önceki ekrana geri dönmemizi sağlar.
• navigation.popToTop(): Stackteki ilk ekrana yönlendirir.

NOT:

“RNCSafeAreaProvider was not found in the UIManager”

Eğer her şeyi aynı şekilde yaptıktan sonra yukarıdaki gibi bir hata alıyorsanız expo update yaparak sorunu çözebilirsiniz.