06.07. React Navigation: Drawer Navigation

Soldan sağa doğru açılan gizli bir kısımda menülerinizi saklar. Bu bölümde basit bir “createDrawerNavigator” örneği yapacağız.

Tab Navigation bölümüne AppDrawer.js isminde bir dosya yaratıp, aşağıdaki kodları yazdım. Index.js bölümünden ilk çalışacak dosyayı ayarlayarak istediğiniz örneği çalıştırabilirsiniz.

import React from 'react';
import { Text, View, StyleSheet, Button, Image } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
      </View>
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./notif-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

const MyApp = createAppContainer(MyDrawerNavigator);

export default MyApp;

import React from 'react';

import { Text, View, StyleSheet, Button, Image } from 'react-native';

import { createDrawerNavigator, createAppContainer } from 'react-navigation';

class MyHomeScreen extends React.Component {

static navigationOptions = {

drawerLabel: 'Home',

drawerIcon: ({ tintColor }) => (

<Image

source={require('./chats-icon.png')}

style={[styles.icon, {tintColor: tintColor}]}

};

render() {

return (

<Button

onPress={() => this.props.navigation.navigate('Notifications')}

title="Go to notifications"

</View>

);

}

class MyNotificationsScreen extends React.Component {

static navigationOptions = {

drawerLabel: 'Notifications',

drawerIcon: ({ tintColor }) => (

<Image

source={require('./notif-icon.png')}

style={[styles.icon, {tintColor: tintColor}]}

};

render() {

return (

<Button

onPress={() => this.props.navigation.goBack()}

title="Go back home"

</View>

);

}

const styles = StyleSheet.create({

icon: {

width: 24,

height: 24,

});

const MyDrawerNavigator = createDrawerNavigator({

Home: {

screen: MyHomeScreen,

Notifications: {

screen: MyNotificationsScreen,

});

const MyApp = createAppContainer(MyDrawerNavigator);

export default MyApp;

Bu örneğinde Tab örneğine çok benzediği görülmektedir. Bu örnekte internetten bulduğum ikonları projeye ekledim. Drawer bölümünde ikonları görebilirsiniz.

Eğer bu gizli menüyü kod ile açmak veya kapamak isteseniz aşağıdaki kodları kullanabilirsiniz.

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();

1 2	this.props.navigation.openDrawer(); this.props.navigation.closeDrawer();

Toogle özelliği ile açığı kapalı, kapalıyı açık yapabilirsiniz.

this.props.navigation.toggleDrawer();

1	this.props.navigation.toggleDrawer();

Drawer’ın açık mı kapalı mı olduğunu öğrenmek için:

const parent = this.props.navigation.dangerouslyGetParent();
const isDrawerOpen = parent && parent.state && parent.state.isDrawerOpen;

1 2	const parent = this.props.navigation.dangerouslyGetParent(); const isDrawerOpen = parent && parent.state && parent.state.isDrawerOpen;

Çok basit örneklerle navigation konusu işledik. Daha fazla bilgi için React Navigation sitesini ziyaret edebilirsiniz.