React Native DrawerNavigator

React native ile parmağınızı sürükleyerek bir menü açmak veya sayfalar arasında geçiş yapmak istiyorsanız bu iş için en ideali drawerNavigator olacak, drawerNavigator ile uygulama geliştirmek oldukça kolay ve sayfalar arasında veri taşımakta mümkün.

drawerNavigator kurulumu ve kullanımı anlatalım bu iş için öncelikle react-navigation nesnesini yükleyelim .

Öncelikle react-navigation kurulumunu sağlayalım

sudo npm install react-navigation --save

Nesnelerimizi import edelim ;

import React from 'react';
import {View,Text,TouchableOpacity} from 'react-native';
import createDrawerNavigator from 'react-navigation';
import GirisSayfasi from './GirisSayfasi';
import IkınciSayfa from './IkınciSayfa';

Sağdan açılan menünümüzü tasarlayalım

const CustomDrawerContentComponent = ({navigation,props}) => (
    
    <TouchableOpacity onPress={() => {
    navigation.navigate('IkınciSayfa')
    }} />
    <Text> Yeni Sayfa</Text>
     </TouchableOpacity>

)

render methodumuzu yazalım

 render() {
    return (
       <MyApp/>
    );
  }
}

Artık sıra tüm işlemin döndüğü yönlendirmelerin tanımlandığı alana geldik

const MyApp = createDrawerNavigator({
 GirisSayfasi:{
     screen:GirisSayfasi
  },
   IkınciSayfa:{
     screen:IkınciSayfa
  }
},{
  initialRouteName :'GirisSayfasi',
  contentComponent:CustomDrawerContentComponent,
  drawerPosition:'left',
  drawerOpenRoute:'DrawerOpen',
  drawerCloseRoute:'DrawerClose',
  drawerToggleRoute:'DrawerToggle',
})

initialRouteName ile tanımladığımız alan uygulamamızın ilk çalıştırıldığı anda açılmasını istediğimiz nesnedir.

Sol menüyü açmak için ekranın en solundan sağa doğru parmağınızı çektiğinizde menü açılacaktır ancak siz bu menünün sürükleme ile değilde butona basılınca açılmasını istiyorsanız bu işlem için ilgili nesnenin onPress methoduna aşağıdaki yapıyı vermelisiniz.

navigation.openDrawer();

Yeni bir sayfa eklemek istersek eğer öncelikle sayfayı root sayfamızın içerisine import ediyoruz sonrasında const MyApp içerisine tanımlıyoruz ve yeni sayfa oluşturulma işlemi başarılıdır, oluşturduğumuz sayfaların sol menüde yer almasını istemeyebilirsiniz bu durumda sol menü tanımlaması alanına yazmayarak header alanına veya sayfa içerisindeki bir butona tanımlama sağlayabilirsiniz.

Bunun ile ilgili diğer bir örnek ise ;

            <TouchableOpacity onPress={() => {
              this.props.navigation.navigate('FarkliSayfa',{
                  gonderilecekDegisken:this.state.degisken
               })
            }} />
                <Text> Farklı bir sayfa</Text>
          </TouchableOpacity>

Bu örnekte sol menü içerisinde belirttiğimiz butonlardan farklı bir yapı girdi yani yönlenmek istenen sayfa “,” “{}”  ifadesini kullandık burda yani süslü parantezlerin içerisinde diğer sayfaya göndermek istediğimiz verileri gönderiyoruz, aslına bakarsak AsyncStorage kullanabilirsiniz ancak bu durumda gereksiz yere fazladan cihazın hafızasında veri tutacaksınız bu kabul edilebilir bir durum değildir aslında.