React Native Hamburger Menü

Merhabalar arkadaşlar,

Bugünkü yazımızda React-Native ile hamburger menü yapmayı öğreneceğiz. Daha önceki yazımızda windows bilgisayarda React-Native geliştirmek için gerekli kurulumlardan bahsetmiştik. Yazıya buradan ulaşabilirsiniz.

Öncelikle uygulamayı oluşturacağımız klasöre komut penceresi üzerinden gidiyoruz. Ardından aşağıdaki kod satırını pencerede çalıştırıyoruz. Burada hamburgerMenu yerine farklı bir isimlendirme de yapabilirsiniz.

react-native init hamburgerMenu

Ben masaüstünde çalışacağım için uygulamayı da oluştururken lokasyonu masaüstü olarak seçtim. Ekran görüntüsü aşağıdaki gibidir.

Sonrasında cd hamburgerMenu yazarak proje dosyalarımızın bulunduğu klasöre gidiyoruz. Devamında uygulamayı bir editör ile açıyoruz. Uygulamanın devamında Visual Studio Code kullanacağım için Code . yazarak projeyi açıyoruz.

Çalışmaya menüde kullanacağımız sayfaları oluşturarak başlayacağız. Öncelikle oluşturduğumuz projenin root dizinine sağ tıklayıp Pages adında bir klasör oluşturacağız. Bu klasörü kullanmak zorunda değilsiniz ancak ilerleyen zamanlarda projeyi geliştirmede sıkıntı yaşamamak adına düzenli bir şekilde başlamak faydalı olacaktır.

Sayfalarımızda kullanacağımız bazı bileşenler için komut penceresine uygulama klasörü açıkken aşağıdaki iki satırı çalıştırıyoruz ve Native-Base ve React-Native-Elements kütüphanelerini projemize ekliyoruz.

npm install native-base --save
react-native link
npm install react-native-elements

Yukarıdaki işlem tamamlandıktan sonra HomePage.js, ProfilePage.js, SettingsPage.js, NotificationPage.js isimleriyle toplamda 4 sayfa oluşturduk. Bu dört sayfayı oluşturacağımız menüde kullanacağız. Başlangıç için oluşturduğumuz sayfaların kodu aşağıdaki gibidir.

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Header } from 'react-native-elements';
import { Left, Right, Icon } from 'native-base';

class HomePage extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Header
                    leftComponent={<Icon name="menu" onPress={() => this.props.navigation.openDrawer()} />}
                />
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>Home Page</Text>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});
export default HomePage;

Oluşturmuş olduğumuz sayfalarda her sayfa üzerinde görünecek birer tane header ve sayfaların ismini yazdığımız birer text bileşeni bulunmaktadır.

Sayfalarımızı oluşturduktan sonra menümüzü oluşturmak üzere root dizininde bulunan App.js dosyasına dönüyoruz. Menümüzü oluştururken React-Navigation kullanacağız. Öncelikle React-Navigation’ı projemize dahil ediyoruz.

npm i react-navigation

Mevcut App.js dosyasımızı tamamen temizliyoruz ve kullanacağımız kütüphaneler ile birlikte az önce oluşturduğumuz sayfaları ekliyoruz. Kullanılacak kütüphaneler ve sayfalar aşağıdaki gibidir.

import React, { Component } from 'react';
import { Text, View, SafeAreaView, ScrollView, Dimensions, Image } from 'react-native';
import { createDrawerNavigator, DrawerItems, createAppContainer } from 'react-navigation';
import { Icon } from 'native-base';
import HomePage from './Pages/HomePage';
import SettingsPage from './Pages/SettingsPage';
import NotificationsPage from './Pages/NotificationsPage';
import ProfilePage from './Pages/ProfilePage';

Yukarıdaki alanı ekledikten sonra menümüzün tasarımını yapacağız. Web tarafındaki html olarak düşünebilirsiniz.

Bu alan içerisinde öncelikle sayfanın en üstünde bulunacak bir logo alanı ve devamında uygulama adı, kullanıcı adı gibi şeyler için kullanılmak üzere bir text alanı ekledik.

Text alanından sonra ise yazının devamında ekleyeceğimiz sayfaları göstermek için DrawerItems tagini ekledik. Menüde tanımlamış olduğumuz sayfalar bu alanda gösterilecektir.

Yine menü listelendikten sonra açılan hamburger menünün en altına iletişim, hakkımızda, yardım vs. için kullanılabilecek iki adet tıklanabilir ikon ekledik. Yine buradaki ikon sayısı da arttırılabilir.

Uygulamanın bu kod bloğu nedeniyle hata almaması için root dizinine assets klasörü oluşturup no-image.png isimli bir görsel eklenmesi gerekmektedir. (Yukarıda belirtmiş olduğum sabit görsel.)

const CustomDrawerNavigation = (props) => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ height: 250, backgroundColor: '#d2d2d2', opacity: 0.9 }}>
        <View style={{ height: 200, backgroundColor: 'Green', alignItems: 'center', justifyContent: 'center' }}>
          <Image source={require('./assets/no-image.png')} style={{ height: 150, width: 150, borderRadius: 60 }} />
        </View>
        <View style={{ height: 50, backgroundColor: 'Green', alignItems: 'center', justifyContent: 'center' }}>
          <Text>John Doe</Text>
        </View>
      </View>
      <ScrollView>
        <DrawerItems {...props} />
      </ScrollView>
      <View style={{ alignItems: "center", bottom: 20 }}>
        <View style={{ flexDirection: 'row' }}>
          <View style={{ flexDirection: 'column', marginRight: 15 }}>
            <Icon name="flask" style={{ fontSize: 24 }} onPress={() => console.log("Tıkladın")} />
          </View>
          <View style={{ flexDirection: 'column' }}>
            <Icon name="call" style={{ fontSize: 24 }} onPress={() => console.log("Tıkladın")} />
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

Devamında sayfamızda bir createDrawerNavigator oluşturarak menüde göstereceğimiz sayfaları ve genel özelliklerini tanımlayacağız. Eklememiz gereken kod bloğu aşağıdaki gibidir. Yine yukarıda oluşturmuş olduğumuz tasarımı da bu bölümde contentComponent olarak ekliyoruz. Kısacası bu alanda bir menü oluştur, tasarım olarak da bir üst kısımda hazırlamış olduğum alanı kullan diyoruz.

const Drawer = createDrawerNavigator({
  Home: {
    screen: HomePage,
    navigationOptions: {
      title: 'Homepage'
    }
  },
  ProfilePage: {
    screen: ProfilePage,
    navigationOptions: {
      title: 'ProfilePage'
    }
  },
  Notifications: {
    screen: NotificationsPage,
    navigationOptions: {
      title: 'Notifications'
    }
  },
  SettingsPage: {
    screen: SettingsPage,
    navigationOptions: {
      title: 'SettingsPage'
    }
  }
},
  {
    drawerPosition: 'left',
    contentComponent: CustomDrawerNavigation,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
    drawerWidth: (width / 3) * 2
  });

Ekleyeceğiniz her yeni sayfa için aşağıdaki kod bloğunu tekrar edebilirsiniz.

  SettingsPage: {
    screen: SettingsPage,
    navigationOptions: {
      title: 'SettingsPage'
    }
  }

Yukarıdaki kod bloklarını tamamladıktan sonra App.js dosyamızın sonuna aşağıdaki satırı ekleyip menümüzü tamamlıyoruz.

const App = createAppContainer(Drawer);

export default App;

Bu noktadan sonra uygulamayı çalıştırmak istediğimizde aşağıdaki gibi bir hata alacağız.

Hata aldığımız noktada uygulamamızın çalışmasını (Komut penceresinde CTRL + C yaparak) durduruyoruz ve aynı pencerede sırasıyla aşağıdaki iki satırı çalıştırıyoruz.

npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler

Bu iki satırın çalışması tamamlandıktan sonra hatanın tekrarlamaması için uygulamayı sanal cihazımızdan silip Android Studio aracılığıyla tekrar derleyip sanal cihazımıza yüklememiz gerekiyor. Uygulamamızı tekrar silip yükledikten sonra Komut penceresine npm start yazarak uygulamamızı ayağa kaldırıyoruz. Şu andaki ekran görüntüsü aşağıdaki gibidir.

Buraya kadar eklemiş olduğunuz kodu çalıştırmak istediğiniz taktirde menü çalışacaktır. Bu adımdan sonra menümüzün biraz daha güzel görünmesini sağlamak için sayfa isimlerinin başına birer tane ikon ekleyeceğiz. Daha önceki adımlarda Icon kullanımında ihtiyaç duyacağımız native-base kütüphanesini projemize eklemiştik. Icon kullanımı için oluşturduğumuz her sayfada Render‘ın hemen üzerine aşağıdaki kod bloğunu ekliyoruz.

    static navigationOptions = {
        drawerIcon: ({ tintColor }) => (
            <Icon name="home" style={{ fontSize: 24, color: tintColor }} />
        )
    }

Burada iconlar için https://ionicframework.com/docs/ionicons/ linkini kullanabilirsiniz. Buradaki satırları name alanına eklemeniz yeterli olacaktır. Menümüzün son hali aşağıdaki gibidir.

Bugünkü yazımızda Hamburger Menü oluşturmaktan bahsettik. Oluşturmuş olduğumuz menüye https://github.com/cinarrtolga/react-hamburger-menu linkinden erişebilirsiniz.

Start the Discussion!

Your email address will not be published. Required fields are marked *