React Native Instagram — Projenin oluşturulması ve React Native Navigation

5 min readJan 21, 2020

Aslen 8 yazılık bu serinin diğer yazılarına aşağıdaki linklerden ulaşabilirsiniz:

Önceki yazımda React Native Instagram projesinin bitmiş hali ile ilgili bir proje mimarisinin özetini aktarmıştım. Şimdi sıfırdan böyle bir proje nasıl yapılır ele alalım. Projeyi oluşturmak için React Native CLI’ını kullanarak aşağıdaki kodu çalıştırmamız gerekiyor:

react-native init Instagram

Geliştirim ortamı olarak VSCode’u tercih ettiğim için, proje oluşturulduktan sonra projede hataları gidermek amacıyla VSCode için debug işlemini aktif etmemiz gerekiyor.

Bunun için öncelikle Visual Studio Marketplace’den React Native Tools eklentisini indirip kurmanız gerekiyor.

Daha sonra VSCode’da File menüsünden Open’a tıklayıp Instagram dizinini açarak sol menüdeki debug sekmesine ( böcek simgesine) tıklandığında çıkan menüde yer alan create a launch.json file linkine tıklayalım.

Arama menüsünde React Native’i seçerek debug configurations kısmında da Android veya IOS olacak şekilde istediğimiz platformu seçelim.

İşlem tamamlandığında soldaki gibi bir launch.json dosyası oluşturulacaktır. Bu dosya içerisine elle müdahale edebilir ve yeni platformlar ekleyebilirsiniz.

Artık launch.json da eklendiğine göre, üstte yer alan Debug iOS seçeneğinin yanındaki play tuşuna basarak cihazda debug işlemini başlatabiliriz. Eğer başarılı bir şekilde kurulum yaptıysanız Simülatör’de “Welcome to React” yazılı bir ekran sizi karşılıyor olacaktır.

Öncelikle ekranları birbirine bağlamak (routing) için navigation kütüphanelerini eklememiz gerekiyor. React Native kütüphanesi, yeni versiyonla (4.0) birlikte, her bir navigasyon türü için farklı kütüphaneye ayrılmıştır. Bu nedenle ihtiyacımız olan navigation kütüphanesini ayrı ayrı yüklememiz gerekiyor. Yaygın olarak kullanılan navigasyon kütüphanelerini açıklayacak olursak:

createStackNavigator

Stack Navigator’ün amacı, bir ekrandan diğer ekrana geçiş için yeni ekranları çağırarak yığına eklenmesini sağlamaktır. Daha sonra geri butonuna basıldıkça bu yığından mevcut ekran çıkarılarak bir önceki ekrana yönlendirilmesini sağlamaktır. Ayrıca üstte bir appBar görüntülemek istiyorsanız bu kütüphaneyi kullanmalısınız. Bu kütüphane her uygulamada yaygın olarak kullanılmaktadır.

createSwitchNavigator

Bu navigator, yeni ekran eklenince bir öncekinin üstüne yazılmasını sağlar. Login gibi işlemler için elverişlidir. Bu sayede kullanıcı login olduktan sonra geri tuşuna bastığında login ekranına yönlendirme yapılmamış olur.

createAnimatedSwitchNavigator

Bu navigator, switch navigator için animasyon eklenmesini ve login ekranından diğer ekranlara geçiş animasyonunun oluşturulmasını sağlar.

createDrawerNavigator

Bu navigator, sol ya da sağ taraftan drawer (çekmece) menüsünün gösterilmesini sağlar. Profil, ayarlar, Çıkış yap gibi menü elemanları bu drawer içerisine konulabilir.

createBottomTabNavigator

Bu navigator, alt kısma bir bottom tab bar eklenmesini sağlar. Bu sayede eklenen butonlar ile kullanıcı 5 ekrana kadar tek seferde geçiş yapabilir.

createMaterialBottomTabNavigator

Bu navigator, projede google’ın material tasarımı kullanıldığında, bottom bar’ın material tasarıma uygun olarak görüntülenmesini sağlar.

createMaterialTopTabNavigator

Bu navigator, material tasarıma uygun olarak proje geliştirilirken üst tab bar’ın material tasarıma uygun olarak görüntülenmesini sağlar.

Navigation kütüphanelerinin eklenmesi

Instagram projesinde kullanılabilecek navigation kütüphanelerini eklemek için sırasıyla aşağıdaki komutları terminalde çalıştırabilirsiniz. react-navigation ve react-native-gesture-handler kütüphaneleri, navigation kütüphanelerinin çalışması için gereklidir. Ayrıca createSwitchNavigator fonksiyonu, react-navigation ile birlikte yüklü halde gelecektir.

npm i react-navigation --save
npm i react-native-gesture-handler --save
npm i react-navigation-stack --save
npm i @react-native-community/masked-view --save
npm i react-navigation-drawer --save
npm i react-navigation-tabs --save

Kütüphaneler yüklendikten sonra eğer ios üzerinde geliştirme yapıyorsanız, uygulamanın sağlıklı çalışabilmesi için native Cocoapods kütüphanelerini de kurmanız gereklidir. Bunun için terminalden ios dizinine gidip pod install komutunu çalıştırabilirsiniz:

cd ios
pod install
cd ..

Pod’lar yüklendiğinde proje dizinlerini ekleyelim ve component dosyalarını içeriği boş olacak şekilde aşağıdaki görseldeki gibi oluşturalım:

res dizini içerisindeki colors.js ve palette.js dosyaları github projesinden temin edilebilir. package.json dosyaları, klasörü bir modül gibi kullanmaya yarar. Bu sayede ../../ gibi göreceli path’lerin kullanımının önüne geçilmiş olur.

AppNavigator.js dosyası projenin başlangıç component’i olacağı için öncelikle bunu projenin root dizinindeki index.js’te belirtmemiz gerekiyor:

import React from 'react';
import {AppRegistry} from 'react-native';
import { StatusBar } from 'react-native';
import {name as appName} from './app.json';
import AppNavigator from 'containers/AppNavigator';
import { createAppContainer } from 'react-navigation';StatusBar.setBarStyle('light-content', true);
StatusBar.backgroundColor = '#000';const Navigation = createAppContainer(AppNavigator);
const Root = () => <Navigation />;
AppRegistry.registerComponent(appName, () => Root);

index.js dosyasında ilgili değişiklikleri yaptıktan sonra AppNavigator.js dosyasına gelelim. Bu component, login için bir yönlendirme yapacağından dolayı switchNavigator kullanmamız gerekiyor. Aşağıdaki şekilde kodlayabiliriz:

import { createSwitchNavigator } from ‘react-navigation’;
import MainNavigator from ‘./main/MainNavigator’;
import LoginScreen from ‘./auth/LoginScreen’;const routeConfig = { Login: LoginScreen, Main: MainNavigator };
const navigatorConfig = { initialRouteName: 'Login' };export default AppNavigator = createSwitchNavigator(routeConfig, navigatorConfig);

routeConfig’de bir parametrede LoginScreen, diğer parametrede MainNavigator kullanmamızın sebebi, örnek olması amacıyla stackNavigator kullanarak MainScreen’den bir butona tıklandığında OtherScreen’e de geçebilmemiz içindir. LoginScreen.js içeriği aşağıdaki gibi olmalıdır:

import React from 'react';
import { Button, View } from 'react-native';
import palette from 'res/palette';const LoginScreen = (props) => {  _signInAsync = async () => { props.navigation.navigate(Main') };  return (
    <View style={palette.container.center}>
      <Button title="Giriş yap" onPress={this._signInAsync} />
    </View>
  );
}export default LoginScreen;

Giriş Yap butonuna tıklandığında MainNavigator çağrılacaktır. MainNavigator.js dosyasının içeriği, en sade haliyle iki ekranı içeren bir stackNavigator elemanıdır:

import { createStackNavigator } from 'react-navigation-stack';
import MainScreen from "./MainScreen";
import OtherScreen from './OtherScreen';const MainNavigator = createStackNavigator({ 
  Main: MainScreen, 
  Other: OtherScreen 
});export default MainNavigator;

MainNavigator içerisinde initialRoute’u parametresinin değerini belirtmesek dahi ilk yazılan ekran olan MainScreen açılacaktır. MainScreen.js dosyasının içeriği aşağıdaki gibidir:

import React from 'react';
import { Button, View } from 'react-native';
import palette from 'res/palette';const MainScreen = (props) => {  _signOutAsync = async () => props.navigation.navigate('Login');
  _otherScreen = async () => props.navigation.navigate('Other');
  
  return (
    <View style={palette.container.center}>
      <Button title="Çıkış Yap" onPress={this._signOutAsync} />
      <Button title="Diğer ekran" onPress={this._otherScreen} />
    </View>
  );
}
export default MainScreen;

OtherScreen.js dosyasının içeriği de benzer şekilde kodlanabilir:

import React from 'react';
import { Button, View } from 'react-native';
import palette from 'res/palette';const OtherScreen = (props) => {  _signOutAsync = async () => props.navigation.navigate('Login');
  
  return (
    <View style={palette.container.center}>
      <Button title="Diğer: Çıkış" onPress={this._signOutAsync} />
    </View>
  );
}
export default OtherScreen;

New video by Zafer Ayan

Edit description

photos.app.goo.gl

Bu kodlara blog reposunu clone ederek, 1-project-creation branch’inden ulaşabilirsiniz:

git checkout 1-project-creation

ozcanzaferayan/react-native-instagram-blog

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…

github.com

Sonuç Olarak

React Native Navigation, bir proje için kaçınılmaz bir kütüphane olduğundan dolayı en başta eklenecek navigator’leri belirleyerek ilerlemek, projenin daha sağlıklı geliştirimine ön ayak olacaktır.

Bu yazımda sizlere React Native Navigation’dan bahsettim. Diğer yazımda BottomTabBar üzerine değineceğim. Soru ve görüşleriniz için yorum kısmından bana yazabilirsiniz. Sonraki yazı >