Ekranlar Arası Yolculuk— React Navigation
Merhaba! Yazılarımda çoğunlukla web geliştirmeye yer verdim. Şimdi ilk kez farklı bir konudan ilerlemenin heyecanı var üzerimde. Son zamanlarda React Native öğrenmeye merak saldım ve mobil teknoloji öğrenme yolculuğuna tam gaz devam ederken bu yolculukta öğrendiğim bir konuyu anlatmak istiyorum. Hadi o zaman React Navigation’ın derinliklerine dalalım!🥳
Bu yazının konu başlıkları şu şekilde:
- Navigation Nedir?
- React Navigation Kütüphanesinin İncelenmesi
- React Navigation Kurulumu
- React Navigation’a Giriş
- Sayfalar Arası Geçiş — Örnek Uygulama
Navigation Nedir?✨
Navigation, bir uygulama içinde kullanıcıların ekranlar arasında geçiş yapmasını sağlayan bir kavramdır. Mobil uygulamalarda kullanıcıların uygulama içinde kolayca gezinmelerini sağlamak ve istedikleri içeriği bulmalarını kolaylaştırmak için navigation kullanılır.
React Native gibi teknolojilerle uygulama geliştirirken navigation işlevselliğini sağlamak için çeşitli kütüphaneler kullanılır. Bu kütüphaneler uygulama ekranları arasında geçiş yapmayı, geçiş animasyonlarını yönetmeyi, geri ve ileri gezinmeyi desteklemeyi ve kullanıcıların uygulama içinde rahatça gezinmelerini sağlamak için diğer temel işlevleri sağlamayı amaçlar. Doğru şekilde tasarlanmış bir navigation, kullanıcıların uygulama içinde rahatça gezinmelerini sağlar ve bu da kullanıcıların memnuniyetini arttırır. Bu nedenle React Native gibi platformlarla çalışırken navigation’ın doğru bir şekilde uygulanması önemlidir.
React Navigation Kütüphanesinin İncelenmesi✨
React Navigation, React Native topluluğu tarafından geliştirilen ve geniş bir kullanıcı tabanına sahip üçüncü parti bir navigation kütüphanesidir. React Navigation uygulamada ayrı ayrı sayfalar oluşturan, bu sayfalar arasında veri taşımayı sağlayan ve sayfa geçişleri imkanı sağlayan bir kütüphanedir. React Native dokümantasyonunda da bu kütüphane tavsiye edilmektedir.
Peki neden üçüncü parti bir kütüphaneye ihtiyacımız var? Neden React Native iç yapısında bunu bize sunmuyor?
React Native’in kendi iç yapısında bu tür bir navigation modülü sunmamasının sebebi platformun temel yapısını sadeleştirmeye odaklamak istemesidir. React Native’in popülerliği ve güçlü topluluğu, üçüncü parti kütüphanelerin geliştirilmesini desteklemiştir. Bu kapsamda React Navigation gibi üçüncü parti kütüphaneler uygulama geliştiricilerine hazır bir navigation çözümü sunarak geliştirme sürecini hızlandırır ve karmaşıklığı azaltır. React Native core ekibi, geliştirme sürecini daha da kolaylaştırmak için bu tür özelliklerin paket halinde sunulmasına odaklanmıştır. Bu konuda daha fazla bilgi almak isterseniz aşağıdaki linke göz atabilirsiniz:
React Native’de paketler ikiye ayrılır:
1. Bazı paketler sadece görsellik üzerinedir. Örneğin UI kit paketleri gibi.
2. Bazı paketler native taraflı haberleşen paketlerdir. Sadece Android veya sadece IOS projesi hazırlarken sayfa geçişlerini o platforma yönelik modülleri kullanarak gerçekleştirmek gerekir ancak React Navigation bu 2 platformla tek bir kanaldan (React Native’den) geliştirme olanağı sağlamaktadır.
React Navigation Kurulumu✨
Şimdi size React Navigation kurulumunu nasıl yapacağınızı anlatmak istiyorum ancak bu yazıyı okuduğunuz tarihte React Navigation dokümantasyonunu ziyaret edip kurulum yönteminin güncel olup olmadığını kontrol etmelisiniz. Aşağıya bıraktığım kurulum linkinden yardım alarak nasıl kurulum yapmanız gerektiğini anlatmaya başlıyorum.🥳
Hangi teknoloji olursa olsun kurulum yaparken her zaman dokümantasyondan faydalanmaya dikkat ediyorum. React Navigation ekibi oldukça açıklayıcı ve öğretici bir dokümantasyon hazırlamış.
Öncelikle React Native projenizi oluşturduğunuzu varsayıyorum. Terminale geliyoruz ve aşağıdaki komutu yazarak React Navigation paketini projemize kuruyoruz:
npm install @react-navigation/nativeDaha sonra da dependencies yüklemeniz gerekiyor.
React Native projenizi Expo ile yönetiyorsanız dependencies kurulumunu aşağıdaki komut ile yapmanız gerekiyor:
npx expo install react-native-screens react-native-safe-area-contextEğer Expo ile yönetmiyorsanız, native(Android/IOS) çalışıyorsanız aşağıdaki komut ile dependencies kurulumu yapmanız gerekiyor:
npm install react-native-screens react-native-safe-area-contextBu aşamadan sonra Android tarafında ana paket kurulumu tamamlanmış oluyor ama IOS ortamında geliştirme yapıyorsanız aşağıdaki komutu çalıştırmanız gerekiyor:
npx pod-install iosBuradaki “pod” dosyaları IOS tarafındaki modüllere karşılık gelmektedir.
Böylece hem Expo tarafında hem de native(Android/IOS) tarafta kurulumu tamamlamış olduk.🎉
React Navigation’a Giriş✨
Kurulumu gerçekleştirdiğimize göre React Navigation’ı kurcalamaya başlayabiliriz.🤓 Bunun için React Navigation dokümantasyonunda aşağıdaki linkten yardım aldım:
Bu yazıyı dokümantasyon övgüsüne dönüştürmek istemezdim ama dokümantasyonda navigation paketinin nasıl çalıştığı uzun, detaylı ve açıklayıcı bir şekilde anlatılmış.🫠
React Navigation’da 3 temel yapı vardır:
- Stack
- Tab
- Drawer
Burada ihtiyacınız olan yapıyı npm/yarn/pnpm kullanarak projenize dahil edebilirsiniz. React Navigation’ın tek tek paket yükletme sebebi, hangi yapıya ihtiyacınız varsa sadece onu kullanma olanağı sağlamasıdır.
👉 Stack
Kullanıcı hangi ekranla karşılaşacaksa stack yapısı ekranda onu gösterir. Kullanıcı başka sayfaya gidecekse mevcut sayfayı kaldırır yeni sayfayı yükler ve kullanıcıya geri gelme olanağı da sunar. En temel sayfa geçişi yapısıdır.
Stack yapısı kurulumu için terminale gidip aşağıdaki komutu çalıştırmalısınız:
npm install @react-navigation/native-stackBu kurulumdan sonra stack yapısını kullanmaya başlayabilirsiniz.
👉 Tab
Tab yapısı uygulamada alt kısımda gezinme olanağı sunar. Her bir sekmeyle ekranlar arasında gezinebilmeyi sağlar.
Tab yapısı kurulumu için terminale gidip aşağıdaki komutu çalıştırmalısınız:
npm install @react-navigation/bottom-tabsBu kurulumdan sonra tab yapısını kullanmaya başlayabilirsiniz.
👉 Drawer
Drawer yapısı ekranın yan tarafında kaydırılarak açılıp kapatılabilen bir yapı oluşturur.
Drawer yapısı kurulumu için terminale gidip aşağıdaki komutu çalıştırmalısınız:
npm install @react-navigation/drawerBu kurulumdan sonra drawer yapısını kullanmaya başlayabilirsiniz.
Sayfalar Arası Geçiş — Örnek Uygulama✨
Şimdi ise birlikte örnek bir uygulama yapalım. React Navigation dokümantasyonundan yola çıkarak sizinle stack yapısını kullanmak ve bu yapıyla örnek bir uygulama yapmak istiyorum. Hadi başlayalım!👻
Öncelikle sayfalar arası geçiş için stack yapısının kurulumunu yapıyoruz.
npm install @react-navigation/native-stackDaha sonra App.js dosyamıza geliyoruz ve aşağıdaki kodu yazıyoruz:
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;Bu kod bloğunu inceleyecek olursak;
Gerekli import işlemlerinden sonra HomeScreen adında bir bileşen oluşturuyoruz. Bu bileşenin içerisindeki Home Screen yazısı ekranımızda görünecek.
Daha sonra createNativeStackNavigator fonksiyonunu kullanarak stack oluşturuyoruz. Bu stack, uygulamanın içinde gezinme işlemlerini yönetmek için kullanılır. createNativeStackNavigator fonksiyonu bize 2 tane nesne return eder: Screen ve Navigator. Bu 2 nesne ile gezinme işlevini yapılandırıyoruz. Navigator, route işlemleri için kullandığımız Screen’leri içermektedir.
createNativeStackNavigator’ı Stack değişkenine atadıktan sonra App’in içerisinde NavigationContainer‘ı yazarak navigation yapısını çerçeveleyen ana yapıyı oluşturuyoruz. NavigationContainer, gezinme yapımızı yöneten ve gezinme durumunu içeren bir bileşendir. Bu bileşen, tüm gezinme yapılarını sarmalayan bir bileşen olmalıdır. Büyük bir projede çalıştığımızda da bu bileşeni App.jsx’den import edilen bileşende kullanırız.
Stack.Navigator’ı route işlemini yapacak olan Screen’ler için kullanırız. Stack.Screen de ise farklı ekranları tanımlamak için kullanırız. Bu örnekte Home adında bir ekran tanımladık ve HomeScreen bileşenini aşağıdaki gibi gösterdik:
Hadi şimdi stack yapımıza ikinci bir ekran daha ekleyelim ve ana ekranı ilk render olacak şekilde yapılandıralım:
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-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 = createNativeStackNavigator();
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;Aynı kodlarımıza DetailsScreen adında bir bileşen ekliyoruz. Bu bileşenin içerisindeki Details Screen yazısı ekranımızda görünecek. Yine Stack.Screen içerisinde Details adında bir ekran tanımladık ve DetailsScreen bileşenini gösterdik. Böylece 2 tane ekranımız oldu. Peki uygulama ilk açıldığında gösterilmesini istediğimiz ekranı nasıl göstereceğiz?
Burada devreye initialRouteName giriyor. initialRouteName içerisine hangi sayfanın name’ini prop olarak eklerseniz ilk o sayfayı gösterirsiniz. Yukarıdaki örnekte initialRouteName içerisine Home Screen sayfasının name’ini prop olarak yazdığım için ilk olarak o sayfa görünecektir.
Şimdi ise akıllardaki o soru: Sayfalar arasında geçişi nasıl yaparız?
Hadi kod bloğumuza bi bakalım:
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
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>
);
}
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
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 kodları inceleyecek olursak buradaki odak noktamız ekran bileşenlerine iletilen navigation prop’u olacak. navigation prop’u ekranlar arasında gezinmemizi sağlayan bileşenlere yazılır. Kullanıcının gitmesini istediğimiz route adını belirterek navigate işlevini çağırıyoruz. Örnek kodda butona basıldığında navigation.navigate fonksiyonu çağrılır ve kullanıcı aşağıdaki gösterimde olduğu gibi Details adlı bir başka ekrana yönlendirilir.
İşte bu sayede farklı ekranlar arasında geçiş yapılabilir ve kullanıcılar uygulamanın farklı bölümlerine erişebilir.
React Navigation, React tabanlı mobil uygulamalar için ekranlar arası bir gezinme çözümüdür ve geliştiricilere kullanıcı dostu, esnek ve zengin bir gezinme deneyimi sunar. Bu kütüphane, kolayca özelleştirilebilen bir yapıya sahiptir ve farklı türde ekranlar, geçişler ve diğer gezinme özelliklerini destekler. React Navigation, geliştiricilere uygulamalarının gezinme mantığını basitleştirme ve optimize etme imkanı sağlar. Sonuç olarak mobil uygulama geliştirme sürecini hızlandırırken kullanıcıların daha akıcı ve etkileşimli bir deneyim yaşamasını sağlar.
Sorularınız, yorumlarınız veya konu önerileriniz varsa lütfen bana bildirin. Sizlerin geri bildirimleri blog serimi daha da iyileştirmeme yardımcı olur. Bir sonraki yazıda görüşmek üzere!
