Nedir bu react native navigator ve neden ihtiyacımız var böyle bir şeye ?
Bir web tarayıcısında, bağlantı (<a>) etiketi kullanarak farklı sayfalara bağlantı verebiliyorduk. Kullanıcı bir linke tıkladığında o an aktif olan URL tarayıcı geçmişi yığınına gönderiliyor ve yeni sayfa kullanıcının karşısına açılıyordu. Eğer kullanıcı geri düğmesine bastıysa tarayıcı öğeyi geçmiş yığınından alıp kullanıcı karşısına getiriyordu böylece etkin sayfa artık daha önce ziyaret edilen sayfa olmuş oluyordu. Aslında basitçe düşünürsek tamamen aynı mantık yani web sitesi içerisinde dolaşmamış için gerekli olan linklerin mobil tarafta kullanılması için gerekli olan bir deneyim.
Native stack navigator
Yukarıda görmüş olduğunuz görsel üzerinden anlatmak en anlaşılır ve en kolay yöntem olacak diye düşünüyorum. Stack Navigator’ün amacı, bir ekrandan (sayfadan yada link olarak da düşünebilirsiniz ) diğer ekrana geçiş için yeni ekranları çağırarak stack içine eklenmesini sağlamaktır. Yukarıda konuya değinirken tarayıcı örneği vermiştim aslında basitçe düşürsek çalışma mantıkları birebir aynı burada da sol üst kısımda gördüğünüz geri butonları ile geri gidebilirsiniz ve ekranınıza o an bir önceki sayfa gelir.
Şimdi beraber StackNavigator kullanarak basit bir uygulama geliştirelim.
StackNav. kullanabilmek için öncelikle projemize aşağıda bulunan paketi yüklememiz gerekmekte.
npm install @react-navigation/native-stackPaketi yükledikten sonra projeyi yeniden başlatmanızı tavsiye ederim ek olarak android tarafında çalışmalar yaptığım için ben ek bir ayar yapmama gerek yok fakat ios tarafında çalışıyorsanız ufak bir ayarlama yapmanız gerekecek ayarlama denemez aslında uygulamanın sağlıklı çalışabilmesi için native Cocoapods kütüphanelerini kurmanız gerekli.
Kök dizinde iken aşağıda bulunan kodları uygulamanız yeterli.
cd ios
pod install
cd ..Şimdi aşağıda bulunan gist üzerinden anlatımıma devam edeyim.
Öncelikle burada bulunan bütün kodları kopyalayıp App.js içine yapıştıralım ve tek tek beraber kodları inceleyelim.
Öncelikle Navigator yapısını kullanmamız için import etmemiz gereken kütüğhane ve fonksiyon var.(Satır 3 ve Satır 4)
Yukarıda isimlerinden de anlayacağınız üzere Bir adet Container ve bir adet fonksiyonumuz var. NavigationContainer’i bir provider olarak düşünebilirsiniz. createNativeStackNavigator ise bir fonksiyon bu fonksiyon sayesinde bir navigation işlemlerimizi yapabilicez.
Öncelikle import etmiş olduğumuz createNativeStackNavigator’ı bir değişkene atayalım bu sayede erişebilelim.
const Stack = createNativeStackNavigator();Daha sonra App Componentimizi import etmiş olduğumuz Provider ile saralım.
function App(){return (<NavigationContainer> ... </NavigationContainer>);}Şimdi genel olarak bütün Navigation işlemlerinde bunu yapacağız daha sonra kullanmak istediğimiz Navigation yöntemini belirtmemiz gerekiyor bir StackNavigation kullanıyoruz o zaman;
function App(){return (<NavigationContainer> <Stack.Navigator initialRouteName="Home">
...........
</Stack.Navigator>
</NavigationContainer>);}
Şeklinde bir tanımlama yapmamız gerekiyor.
(Burada Stack bizim fonksiyona erişmek için atadığımız değişkenin adı isterseniz o değişkenin adını Router olarak atayın isterseniz adınız olarak atayın hiç fark etmez onun sayesinde istediğimiz yapılara erişebiliyoruz.)
Tanımlamayı yaptık ( sarmalladık diyebiliriz aslında) daha sonra uygulama açıldığı zaman başlayacak olarak yani kullanıcının karşısına çıkacak olan ilk sayfayı belirtmek için mutlala initialRouteName tanımlamasını yapmamız gerekiyor.
Router yapımızı oluşturmak için ise Screen fonksiyonunu kullanmamız gerekiyor.
Screen Fonksiyonu 2 main api ihtiyacı duyar bunlar Name ve Component
Name : Dışarıdan navigation’a erişebilmemiz için gerekli olan takma isim diyebiliriz.
Component : O sayfada gösterilecek olan component.
https://reactnavigation.org/docs/screen (Daha doğru tanımlamalar ve daha fazla api için mutlaka göz atın)
Basitçe yapısı ;
<Stack.Screen name="Home" component={HomeScreen} />Şimdi Bütün Router yapımızı tanımladığımız hale bi göz gezdirelim.
Gördüğünüz gibi hepsi tek bir Stack içinde ve birbirleri ile ilişkili bir durumda çalışıyor yani biz buradan istediğimiz şekilde Route değişikliği yapabiliriz.
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="SignUp" component={SignUp} />
<Stack.Screen name="ResetPassword" component={ResetPassword} />
<Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator>
</NavigationContainer>Uygulamamızı çalıştıralım
Hiç tanımlama yapmamış olmamıza rağmen üst tarafta bir Header oluştu gördüğünüz gibi bu o an hangi sayfada olduğumuzu söylüyor bize.
Peki biz burada bulunan Giriş Yap Yada Kayıt Ol butonuna tıkladığımız zaman nasıl o routerlara erişeceğiz.
Bildiğiniz gibi bir React Componenti Props alırken aynı zamanda navigation adında bir objede almakta bunu çağırarak bu Route işlemlerini yapabiliriz.
Örnek olarak Home Componentini ele alalım
function HomeScreen({navigation}) {return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontSize:18,marginBottom:12}}>KubilayBzk.dev 'e hoşgeldiniz</Text>
<View style={{display:'flex', flexDirection:"row",justifyContent:"space-around"}}>
<Button onPress={()=>navigation.navigate("Login")} title="Giriş Yap"/>
<Button onPress={()=>navigation.navigate("SignUp")} title="Kayit Ol"/>
</View>
</View>
);}
Görüğünüz gibi props olarak gelen objenin navigate fonksiyonuna içinde olan navigate içine App comp. içinde belirtmiş olduğumuz name değerlerini girdik .
Uygulamamızın görüntüsü
