React Native Gönderi Uygulaması — Projenin oluşturulması ve React Navigation Kullanımı

Merhaba arkadaşlar! 😊 Yeni bir uygulama yapımı ile karşınızdayım. Ancak bu uygulamayı tek bir makalede anlatıp sizleri boğmamak adına bir seri haline getirmeye karar verdim. Aslında çok zor bir uygulama değil ancak makalelerimi her seviyeden geliştiricinin anlaması amacıyla yazdığım için projeyi bölerek anlatmak istedim.

Projemizin ilk bölümünü anlatacağım bu makalede; React Native’de bir proje nasıl oluşturulur, navigation nedir/nasıl kullanılır bunları öğreneceğiz. O zaman dilerseniz gelin projemizi oluşturalım..

Öncelikle bilgisayarımızdan terminali açıp aşağıdaki kodu yazıyoruz:

npx react-native init postApp

Ben geliştirme ortamı olarak Visual Studio Code’u kullandığımdan, projemiz oluştuktan sonra Visual Studio Code’da File kısmından Open Folder deyip oluşturduğumuz projeyi seçip açıyoruz.

Android için;

npx react-native run-android

Ios için;

npx react-native run-ios

komutlarını terminalde proje dizinine gelip yazdığımızda, simülatörde “Welcome to React” yazısını görüyorsak projemiz başarılı bir şekilde kurulmuş demektir.

Navigation Kullanımı

Navigation kütüphanesi sayfalar arası geçiş için kullanılan bir kütüphanedir. React Native’de hazır kurulu olarak gelmez, o yüzden bizim kurmamız gerekli.

Android için;

npm install @react-navigation/native

Ios için;

yarn add @react-navigation/native

komutlarını kullanarak proje dizininde navigation kütüphanesini yüklüyoruz.

Navigation bize sayfa geçişi, animasyon gibi hareketlilikler sağladığından bir kütüphane daha yüklememiz gerekiyor.

Android için;

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

Ios için;

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

komutlarını kullanarak proje dizininde yüklüyoruz.

Navigation yapısı ile sayfa geçişlerinde sayfalar arkaplanda bir yığın gibi oluştuğundan bunun için de yüklememiz gereken bir kütüphane var:

Android için;

npm install @react-navigation/stack

Ios için;

yarn add @react-navigation/stack

Ayrıca Ios kullanıcılarının son olarak bir de aşağıdaki komutu çalıştırması gerekiyor:

npx pod-install ios

Evet, yüklememiz gereken kütüphanler bu kadardı. Şimdi sıra geldi navigation kütüphanesini projemize dahil etmeye.

Navigation(yönlendirme) işlemleri genelde tek bir dosya içinde yapılır. O yüzden bu işlem için ayrıca bir AppNavigator.js dosyası oluşturuyoruz. Proje dizinlerini de aşağıdaki görseldeki gibi olacak şekilde düzenliyoruz:

AppNavigator.js projenin başlangıç dosyası olacağı için bunu index.js dosyasında belirtmemiz gerekiyor:

Yüklediğimiz kütüphaneleri kullanabilmemiz için onları AppNavigator.js dosyasına dahil etmemiz gerekiyor:

Ayrıca ilk görmek istediğimi ekranın da Login ekranı olmasını istediğimiz için initialRouteName’e Login’in ismini verdik.

Stack.Navigator içinde yazdığımız her bir Stack.Screen içine yazılan componentler bizim görmek istediğimiz sayfalarımız olacaktır. Son düzenleme ile de AppNavigator şu şekilde olmalıdır:

Bu bir başlangıç projesi olduğundan, sayfaları şimdilik basit tuttum ve Login’i şu şekilde yazdım:

Yukarıdaki Login kodunda da görüldüğü üzere, Login ekranında “Giriş Yap” isimli bir butonumuz var ve ona bastığımız zaman onPress metodumuz çalışacak. O da bizi navigation ile MainPage sayfasına yönlendirdiği için, biz “Giriş Yap” butonuna tıkladığımız an MainPage sayfasına geçeceğiz.

MainPage için ise, sadece hangi sayfada olduğumuzu anlayabilmemiz için şöyle ufak bir kod yazdım:

Not: Login ve MainPage sayfalarını ayrı bir index.js dosyasında export ettiğim için sayfa içlerinde export default şeklinde değil de export {Login} şeklinde yazmam yeterli oldu. Bu yazım şekli clean code tekniklerinden biridir.

Sayfalar için olan index.js:

Özet

Navigation, projemiz için önemli bir özelliktir. Tek sayfalık bir deneme projesi yapmıyorsanız, önceden göstereceğiniz sayfaları belirleyip mutlaka kullanmanız gerekir. Projenizin hem daha sağlıklı hem de daha güzel olmasını sağlar.

Bu yazımda Gönderi Uygulaması serimizin ilk bölümünü anlattım. Devamı gelecektir. Sorularınız olursa lütfen yorumlarda belirtmekten çekinmeyin. Bir sonraki yazımda görüşmek dileğiyle, hoşçakalın. 😊