React Native Stack Navigator

React Native Stack Navigator

Herkese merhabalar , bu yazımızda sizlerle beraber react native üzerinde stack navigasyon işlemlerini nasıl yapabiliriz bunlara değinmeye çalışıyor olacağız öncelikle stack navigasyon bir yığın şeklinde üzerine birşey koydukça dolar üzerinden birşey aldıkça azalır şeklinde düşünebiliriz bir kutumuz var içerisini dolduruyoruz daha sonra ise içerisinden birer birer çıkartıyoruz işte bu mantığı navigasyon yığının içerisine routelar ile dolduyor daha sonra geri tuşuna bastığımızda örneğin navigasyon yığının içerisinden birer birer routeları çıkarıyoruz gibi düşünebiliriz. Şimdi boş bir react native projesi oluşturarak işe başlayalım.

Kurulumlar

1-)React Native projesi oluşturma

npx react-native init AwesomeProject

2-)React Navigasyon paketini kurma

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack

Daha sonra app.js içerisine gelip aşağıdaki gibi bir kodlama yapıyorum.

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
</NavigationContainer>
);}

react navigasyon içerisinden navigationContainer dahil edip artık route değerlerimi navigation container içerisine tanımlayabilir hale getiriyorum.

import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);}
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);}
export default App;

yukarıdaki örnekte iki adet ekran oluşturuyoruz ve app içerisine daha önce tanımladığımız navigation container içerisine stack navigasyon yapısını kullanacağımız için createStackNavigator diyerek bir örneğini alıp container içerisinde stack içerisindeki navigator ile sarmalayacak şekilde routeları tanımlıyor ve hangi componentin hangi durumda render edilmesi gerektiğini belirtiyorum , örneğin /Home HomeScreen ve /Details DetailScreen componentini render edecektir initialRouteName olarak ise sayfa açıldığında ilk hangi sayfanın açılması gerektiğini belirtiyoruz.

Peki ya bu iki ekran arasında gidip gelme işlemini ise şu şekilde yapacağız;

function HomeScreen({navigation}) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent:
'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);}

component stack içerisinde bulunduğu için navigation props olarak alıp diğer sayfaya yönlendirme işlemini bu şekilde yapabiliriz.

Herkese İyi Çalışmalar Dilerim.