8 Ekim 2020

React-Native 7 – React-Navigation ile DrawerMenu

ile Turan Yunus

Selamlar,

Artık tamamen kodlamaya ve paket yönetme ve kurma odaklı gidiyoruz. Tüm geliştirmelerimi tamamen iOS ortamında yapacağım. İlk olarak DrawerMenu(Yandan Açılan Menü) kullanıcam. Çünkü Drawer menü hakkında daha az kaynak oldugunu düşünüyorum. 

Bu konu biraz uzun olabilir. Bilginize …

İlk olarak React-Navigation Drawer Menu için gerekli olan paketleri yükleyelim.

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


Daha sonra, bulundugumuz dizinde cd ios/ dedikten sonra pod install komununu çalıştıralım. pod install komutundan sonra paketlerimiz ios ortamında tanımlanmıştır. Sonra cd .. diyip ana dizinimize gidiyoruz.


Daha sonra aşağıdaki klasörleri app.js’den çağırabilmek için geçici olarak resimlerdeki gibi kodluyoruz. 

Home, Login ve Register sayfaları şimdilik aşağıdaki gibi olabilir.

HomeScreen.js
LoginScreen.js
RegisterScreen.js

DrawerMenu tasarımı ve kodlaması için component klasörü altına Background ve DrawerContent adında 2 tane component daha ekliyoruz.

Component klasörü altındaki Background.js kodları aşagıdaki gibidir.

Background.js

Component klasörü altındaki DrawerContent.js kodlarını işinize yarayacağını için direk kodları aşağıya ekliyorum.

import React from 'react';
import {View, StyleSheet, TouchableOpacity, Image, Text} from 'react-native';
import {DrawerContentScrollView} from '@react-navigation/drawer';

import BackgroundComponent from './BackgroundComponent';

export function DrawerContent(props) {
return (
<BackgroundComponent>
<View style={styles.container}>
<DrawerContentScrollView {...props}>
{/* Appname'nin oldugu kısım */}
<View style={styles.drawerContent}>
<TouchableOpacity
style={styles.userInfoSection}
onPress={() => {
props.navigation.navigate('ProfileScreen');
}}>
<View style={styles.drawerItemStyle}>
<Image
source={require('../assests/img/drawerMenu/user.png')}
style={{height: 50, width: 50}}
/>
<View style={{marginLeft: 15, flexDirection: 'column'}}>
<Text style={styles.title}>AppName</Text>
<Text style={styles.caption}>Instagram : AppName</Text>
</View>
</View>
</TouchableOpacity>
</View>
{/* Anasayfa'nın oldugu kısım */}
<View style={styles.drawerContent}>
<TouchableOpacity
style={styles.userInfoSection}
onPress={() => {
props.navigation.navigate('HomeScreen');
}}>
<View style={styles.drawerItemStyle}>
<Image
source={require('../assests/img/drawerMenu/home.png')}
style={styles.drawerItemImageStyle}
/>
<View style={styles.drawerItemTitleStyle}>
<Text style={styles.title}>Anasayfa</Text>
</View>
</View>
</TouchableOpacity>
</View>
{/* Kayıt Ol'un oldugu kısım */}
<View style={styles.drawerContent}>
<TouchableOpacity
style={styles.userInfoSection}
onPress={() => {
props.navigation.navigate('RegisterScreen');
}}>
<View style={styles.drawerItemStyle}>
<Image
source={require('../assests/img/drawerMenu/enter.png')}
style={styles.drawerItemImageStyle}
/>
<View style={styles.drawerItemTitleStyle}>
<Text style={styles.title}>Kayıt Ol</Text>
</View>
</View>
</TouchableOpacity>
</View>
{/* Giriş Yap'ın oldugu kısım */}
<View style={styles.drawerContent}>
<TouchableOpacity
style={styles.userInfoSection}
onPress={() => {
props.navigation.navigate('LoginScreen');
}}>
<View style={styles.drawerItemStyle}>
<Image
source={require('../assests/img/drawerMenu/login.png')}
style={styles.drawerItemImageStyle}
/>
<View style={styles.drawerItemTitleStyle}>
<Text style={styles.title}>Giriş Yap</Text>
</View>
</View>
</TouchableOpacity>
</View>
</DrawerContentScrollView>
</View>
</BackgroundComponent>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgb(14,36,105)',
},
drawerContent: {
flex: 1,
borderBottomColor: '#CCC',
borderBottomWidth: 1,
marginBottom: 15,
paddingBottom: 15,
},
userInfoSection: {
paddingLeft: 20,
},
drawerItemStyle: {
flexDirection: 'row',
},
drawerItemImageStyle: {
height: 25,
width: 25,
},
drawerItemTitleStyle: {
marginLeft: 15,
flexDirection: 'column',
},
title: {
fontSize: 16,
marginTop: 3,
fontWeight: 'bold',
color: 'white',
},
caption: {
fontSize: 14,
lineHeight: 14,
color: 'white',
},
});

NOT : İkonları genellikle flaticon sitesi den indirip kendi projem içinden çagırıyorum.


App.js kodları işinize yarayacağını için direk kodları aşağıya ekliyorum.

import React from 'react';

/*REACT_NAVIGATION*/
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

/*ALL SCREEN*/
import HomeScreen from './src/screens/Home/HomeScreen';
import LoginScreen from './src/screens/Login/LoginScreen';
import RegisterScreen from './src/screens/Register/RegisterScreen';
import {DrawerContent} from './src/components/DrawerContent';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const navigationHandler = () => ({
  headerShown: false,
});

const DrawNavigator = () => {
  return (
    <Drawer.Navigator
      drawerType="back"
      drawerContent={(props) => <DrawerContent {...props} />}> // burada DrawerContent tanımlayarak menümüzü özelleştirdim.
      <Drawer.Screen name="HomeScreen" options={navigationHandler}>
        {(props) => <HomeScreen {...props} />}
      </Drawer.Screen>
      <Drawer.Screen name="LoginScreen" options={navigationHandler}>
        {(props) => <LoginScreen {...props} />}
      </Drawer.Screen>
      <Drawer.Screen name="RegisterScreen" options={navigationHandler}>
        {(props) => <RegisterScreen {...props} />}
      </Drawer.Screen>
    </Drawer.Navigator>
  );
};

export default () => {
  return (
    <NavigationContainer>
      <DrawNavigator />
    </NavigationContainer>
  );
};

Evet arkadaşlar sonuna geldik. Eğer adım adım gitti iseniz aşağıdaki ekranlar gibi görünümler elde ediceksiniz

Soldan açılan menünün görünümü

Arkadaşlar elimden geldiğince anlatmaya çalıştım. Gerçekten az türkçe kaynak oldugu için yapmak istedim. Anlamadığınız noktalarda her türlü sosyal medya aracından bana yazabilirsiniz. Hemen hemen hepsinde aktifim. Kendinize iyi bakın…

Sürç-i lisan etti isek affola