React Native Instagram — BottomBar’ın oluşturulması

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

1. Proje mimarisi
2. Projenin oluşturulması ve React Native Navigation
3. BottomBar’ın oluşturulması
4. FlatList kullanımı (Post’ların görüntülenmesi)
5. Story Listesi
6. RNCamera kullanımı
7. React Navigation Drawer kullanımı
8. Redux kullanımı

Önceki yazımda projeyi oluşturup, React Native Navigation ile ilgili küçük bir örnek yapmıştık. Şimdi Instagram’daki gibi bir bottombar’ın nasıl yapılacağına bakalım. Projede kaldığımız yerden devam etmek için aşağıdaki 1-project-creation branch’ine gidebilirsiniz:

ozcanzaferayan/react-native-instagram-blog

Öncelikle instagram projesinden ikonları temin ederek, src/res dizini içerisine images dizinini oluşturup içine aşağıdaki ikonları atalım.

Daha sonra res/ dizini altında images.js isimli dosyayı oluşturalım. Bu dosya, ikonların path’lerini barındıracak. Bu dosyadaki path değişkenlerini elle oluşturabiliriz ama otomatik hale getirmek daha iyi olacaktır. Bunun için src/ dizini altına scripts/ adında bir dizin oluşturalım ve içerisine buradaki images.js isimli dosyayı ekleyelim. Bu script, images dizini içerisindeki ikon path’lerini okuyarak res/images.js içerisine yazacak. Script’i çalıştırmak için, terminalde proje dizinine giderek aşağıdaki komutu kullanabiliriz:

node src/scripts/images

Komut tamamlandığında res/images.js dosyasının içeriği aşağıdaki gibi olacaktır:

Şimdi bottombar ekleme zamanı. Ama öncelikle bottombar için gerekli olan react-native-reanimate kütüphanesini indirelim ve pod‘unu yükleyelim:

npm i react-native-reanimate --save
cd ios
pod install
cd ..

Artık src/containers/main dizininin içerisine TabNavigator.js dosyasını oluşturabiliriz:

Buradaki kodu açıklayacak olursak, öncelikle routeConfig içerisinde tab sekmelerinde yer alacak ekranları belirliyoruz. Burada daha önceden oluşturduğumuz 2 ekranı kullandım. Her tab ekranında bir appBar bulunduğu için createStackNavigator() fonksiyonunu kullanmamız gerekiyor.

navigatorConfig değişkeninde yer alan tabBarOptions’ta tab ikonlarının genel özelliklerini belirliyoruz. tabBarIcon parametresinde ise, seçili olan ekrana göre uygun ikonu atayarak Image component’ini döndürüyoruz. Daha sonra createBottomNavigator() fonksiyonunu çağırarak ilgili parametreleri ekleyip TabNavigator’ü diğer class’lar içerisinde kullanmak için export ediyoruz.

Şimdi AppNavigator.js’in, oluşturduğumuz TabNavigator.js dosyasını görecek şekilde routeConfig parametresinde değişiklik yapalım:

Projeyi çalıştırdığımızda aşağıdaki gibi sekmeler arasında gezebiliriz:

Projenin son halini 2-adding-bottom-bar branch’ine giderek edinebilirsiniz.

git checkout 2-adding-bottom-bar

Sonuç Olarak

React Native’de createBottomTabNavigator() kullanımı oldukça kolay. Hatta native Android geliştirimine kıyasla daha kolay diyebilirim. Mevcut ekranı kolayca TabNavigator ile sarmalayabiliyorsunuz. Görünümü mevcut tasarıma uydurmak da birkaç satır kod ile halledilebiliyor.

Bu yazımda Bottom Tab Navigator kullanımına değindim. Sonraki yazımda ana ekranı (Home) kodlamaya geçeceğiz. Soru ve görüşlerinizi buradan yazabilirsiniz. Sonraki yazı >