Expo-React Native Drawer Content ve İkonlar

#drawercontent #icons #expo #reactnative

React Native Navigasyon dan stack navigator ve drawer content yapısını detaylıca incelediğinizi farzediyorum. Önce onlara bakarsınız. Sonrasında drawer content yani soldan çekince açılan çekmece düzeni hakkında biraz çalışma fırsatım oldu. Tutorial da sade şekliyle drawer content yapısı zaten var. expo tarafında ise vector ikons konusunda seçebileceğiniz bir çok ikon mevcut. onları da ayrı ayrı biliyordum. Sonrasında bunları birlikte kullanmak nasıl olacaktı. expo icons inceleyince çeşitli filtreler vardı. tek filtre üstünde çalışmaya karar verdim. burada Antdesign örneği var aşağıda.

Hangi sayfaları kullanacaksanız onları önce stack navigator sayfasında oluşturun. ben birkaç tane seçtim burada. Aşağıdaki örnekleri çoğaltınca sayfanın aynı zamanda scroll olabildiğini yani aşağı yukarı çekilen soldaki çubuğun oluştuğunu da göreceksiniz. Sonraki yazıda bu drawer content in en başında bir logo yada resim koymayı da yazmayı planlıyorum.

aşağıdaki kodlar DrawerNavigator. js sayfası şeklinde yaparsanız kolay ilerleme sağlarsınız.

Sayfa adı ve ikon adı sizin keyfinize göre değişir. istediğiniz şekilde kullanabilirsiniz. bir iki kez kodlara bakarsanız çok kolay olduğunu göreceksiniz.

unutmadan burada sadece sayfa adları ve ikonları kullanabilirsiniz.

import React from “react”;

import { createDrawerNavigator } from “@react-navigation/drawer”;

import { ContactStackNavigator } from “./StackNavigator”;

import { GirisStackNavigator } from “./StackNavigator”;

import { TakvimStackNavigator } from “./StackNavigator”;

import { BildirimStackNavigator } from “./StackNavigator”;

import { HaberStackNavigator } from “./StackNavigator”;

import TabNavigator from “./TabNavigator”;

import { AntDesign } from ‘@expo/vector-icons’;

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {

return (

<Drawer.Navigator

screenOptions={({ route }) => ({

drawerIcon: ({ focused, color, size }) => {

let iconName;

if (route.name === ‘Home’) {

iconName = focused ? ‘home’ : ‘home’;

} else if (route.name === ‘Giris’) {

iconName = focused ? ‘login’ : ‘login’;

}else if (route.name === ‘Takvim’) {

iconName = focused ? ‘calendar’ : ‘calendar’;

}else if (route.name === ‘Contact’) {

iconName = focused ? ‘enviromento’ : ‘enviromento’;

}else if (route.name === ‘Bildirim’) {

iconName = focused ? ‘bells’ : ‘bells’;

}else if (route.name === ‘Haberler’) {

iconName = focused ? ‘filetext1’ : ‘filetext1’;

}

return <AntDesign name={iconName} size={size} color={color} />;

},

})}

drawerOptions={{

activeTintColor: ‘tomato’,

inactiveTintColor: ‘gray’,

}}

>

<Drawer.Screen name=”Home” component={TabNavigator} />

<Drawer.Screen name=”Contact” component={ContactStackNavigator} />

<Drawer.Screen name=”Giris” component={GirisStackNavigator} />

<Drawer.Screen name=”Takvim” component={TakvimStackNavigator} />

<Drawer.Screen name=”Bildirim” component={BildirimStackNavigator} />

<Drawer.Screen name=”Haberler” component={HaberStackNavigator} />

</Drawer.Navigator>

);

}

export default DrawerNavigator;

Ekranımız şöyle bir şey oluyor ☺️