React Native'de React Navigation Kurulumu ve Kullanımı (Expo ile)
Bu rehberde, Expo ile React Navigation kurulumu, Stack, Bottom Tabs ve Drawer Navigation sistemlerini adım adım öğreneceksiniz.
Aziz Kurt
Bilgisayar Mühendisi
1. Giriş
Mobil uygulamalarda birden fazla ekran kullanmak kaçınılmazdır. React Native, sayfalar arasında geçiş yapabilmemiz için React Navigation adlı güçlü bir kütüphane sunar.
Bu yazıda, React Navigation'ı Expo ile kuracak ve Stack Navigation, Bottom Tab Navigation ve Drawer Navigation sistemlerini nasıl kullanabileceğimizi adım adım öğreneceğiz.
2. React Navigation Kurulumu
İlk olarak, projemizi oluşturuyoruz. Eğer Expo projeniz yoksa aşağıdaki komutu çalıştırarak yeni bir Expo projesi başlatabilirsiniz:
npx create-expo-app myNavigationApp
cd myNavigationAppArdından, React Navigation kütüphanesini ve gerekli bağımlılıkları yüklüyoruz:
npm install @react-navigation/nativeEk olarak, gerekli bağımlılıkları yüklememiz gerekiyor:
npx expo install react-native-screens react-native-safe-area-context
Son olarak, Expo Router ile expo install expo-router komutunu çalıştırarak projemizi güncelleyebiliriz.
3. Stack Navigation Kullanımı
Stack Navigation, sayfalar arasında geçiş yapmak için kullanılan en yaygın navigasyon türlerinden biridir. Bir ekran diğerinin üzerine eklenir ve geri dönülebilir.
İlk olarak Stack Navigator paketini yüklüyoruz:
npm install @react-navigation/stackArdından, App.js dosyanızı aşağıdaki şekilde düzenleyin:
import React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator();
const HomeScreen = ({ navigation }) => {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
{" "}
<Text>Anasayfa</Text>{" "}
<Button
title="Detaylara Git"
onPress={() => navigation.navigate("Details")}
/>{" "}
</View>
);
};
const DetailsScreen = () => {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
{" "}
<Text>Detaylar Sayfası</Text>{" "}
</View>
);
};
export default function App() {
return (
<NavigationContainer>
{" "}
<Stack.Navigator>
{" "}
<Stack.Screen name="Home" component={HomeScreen} />{" "}
<Stack.Screen name="Details" component={DetailsScreen} />{" "}
</Stack.Navigator>{" "}
</NavigationContainer>
);
}
Bu kod, HomeScreen ve DetailsScreen adlı iki sayfa oluşturur. Butona tıkladığınızda DetailsScreen'e yönlendirilirsiniz.
4. Bottom Tab Navigation Kullanımı
Tab Navigation, Instagram gibi uygulamalarda gördüğümüz alt menü (bottom tab bar) yapısını oluşturmak için kullanılır.
İlk olarak Tab Navigator paketini yüklüyoruz:
npm install @react-navigation/bottom-tabsDaha sonra App.js dosyanızı şu şekilde güncelleyin:
import React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
const Tab = createBottomTabNavigator();
const HomeScreen = () => (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
{" "}
<Text>Anasayfa</Text>{" "}
</View>
);
const ProfileScreen = () => (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
{" "}
<Text>Profil</Text>{" "}
</View>
);
export default function App() {
return (
<NavigationContainer>
{" "}
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
let iconName;
if (route.name === "Home") {
iconName = "home";
} else if (route.name === "Profile") {
iconName = "person";
}
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
>
{" "}
<Tab.Screen name="Home" component={HomeScreen} />{" "}
<Tab.Screen name="Profile" component={ProfileScreen} />{" "}
</Tab.Navigator>{" "}
</NavigationContainer>
);
}
Bu kod ile Home ve Profile sayfalarına sahip bir alt sekme navigasyonu oluşturduk. Her sekmenin simgesi, Ionicons kütüphanesi ile belirlenir.
5. Drawer Navigation Kullanımı
Drawer Navigation, uygulamalarımızın sol tarafında açılan yan menüler (drawer) oluşturmak için kullanılır.
İlk olarak Drawer Navigator paketini yüklüyoruz:
npm install @react-navigation/drawerArdından, App.js dosyanızı aşağıdaki gibi düzenleyin:
import React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
const Drawer = createDrawerNavigator();
const HomeScreen = () => (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
{" "}
<Text>Anasayfa</Text>{" "}
</View>
);
const SettingsScreen = () => (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
{" "}
<Text>Ayarlar</Text>{" "}
</View>
);
export default function App() {
return (
<NavigationContainer>
{" "}
<Drawer.Navigator>
{" "}
<Drawer.Screen name="Home" component={HomeScreen} />{" "}
<Drawer.Screen name="Settings" component={SettingsScreen} />{" "}
</Drawer.Navigator>{" "}
</NavigationContainer>
);
}
Bu sayede Home ve Settings sayfalarına sahip bir yan menü navigasyonu eklemiş olduk.
6. Sonuç
Bu rehberde, React Navigation ile Stack, Bottom Tabs ve Drawer Navigation sistemlerini Expo kullanarak nasıl kuracağımızı öğrendik. Artık çok sayfalı bir uygulama oluşturabilirsiniz! 🚀
İlgili Yazılar
