[React-Native]react navigation 커스텀해서 drawer menu 사용하기

프로젝트 버전

• react-native 0.63.2
• react-navigation 4.3.9

프로젝트 버전을 설정하고 react-navigation을 이미 프로젝트에 적용했다는 가정하에 진행하도록 하겠습니다.

 

패키지 설치

npm install react-navigation-drawer

or

yarn add react-navigation-drawer

 

DrawerBar.js 생성

자신이 원하는 drawer 메뉴를 만들어주시면 됩니다. 저는 메뉴 상단에 프로필사진과 이름 띄어놓고 밑에는 메뉴들이 나올수있게 코드를 작성하였습니다 .

import React from 'react';
import { View, TouchableOpacity, Dimensions, Text, Alert, Image } from 'react-native';
import { NavigationActions } from 'react-navigation';

export default class DrawerBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          idx: 0,
          title: '소개',
        },
        {
          idx: 1,
          title: '공지사항',
        },
        {
          idx: 2,
          title: '정보',
        },
        {
          idx: 3,
          title: '뉴스',
        },
        {
          idx: 4,
          title: '포인트',
        },
        {
          idx: 5,
          title: '초대',
        },
        {
          idx: 6,
          title: '고객센터',
        },
        {
          idx: 7,
          title: '설정',
        },
        {
          idx: 8,
          title: '로그아웃',
        },
      ],
    };
  }

  navigateToScreen = route => () => {
    const navigate = NavigationActions.navigate({
      routeName: route,
    });
    this.props.navigation.dispatch(navigate);
  };

  render() {
    return (
      <View
        style={{
          borderTopRightRadius: 50,
          borderBottomRightRadius: 50,
          backgroundColor: 'white',
          flex: 1,
        }}>
        <View
          style={{
            height: 200,
            backgroundColor: 'rgba(213,213,213,0.27)',
            borderTopRightRadius: 50,
            paddingTop: 50,
            paddingLeft: 30,
          }}>
          <Image
            style={{ height: 72, width: 72, borderRadius: 37 }}
            source={{ uri: 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png' }}
          />
          <Text
            style={{
              marginTop: 15,
              fontSize: 26,
              fontWeight: 'bold',
              fontStyle: 'normal',
              lineHeight: 31,
              letterSpacing: 0,
              textAlign: 'left',
              color: '#272727',
            }}>
            airplane
          </Text>
        </View>
        <View>
          {this.state.list.map(data => (
            <View>
              <TouchableOpacity
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  paddingVertical: 5,
                  paddingTop: 27,
                  paddingLeft: 30,
                }}
                onPress={() => {
                  data.idx === 8 ? this._logout() : Alert.alert('title', `1${data.idx}`);
                }}>
                <Text
                  style={{
                    marginLeft: 12,
                    color: '#272727',
                    fontSize: 16,
                    lineHeight: 19,
                  }}>
                  {data.title}
                </Text>
              </TouchableOpacity>
            </View>
          ))}
        </View>
      </View>
    );
  }
}

 

navigation/index.js에 DrawerBar.js 추가

navigation/index.js에 DrawerBar.js 추가

 

navigation/index.js에 DrawerNavigator 생성하고 옵션 설정

https://reactnavigation.org/docs/4.x/drawer-navigator/ 에 가면 여러가지 옵션을 적용 할 수 있으니 사용자 맞는 설정을 하면 될것같습니다.

import { createDrawerNavigator } from 'react-navigation-drawer';

.
.
.

import DrawerBar from './DrawerBar';

.
.
.


// 탭 네비게이터
const TabNavigator = createBottomTabNavigator({
  Home: HomeStack,
  Info: InfoStack,
  News: NewsStack,
  Menu: MenuStack,
});

// 드로어 네비게이터
const AppDrawerNavigator = createDrawerNavigator(
  {
    TabNavigator,
  },
  {
		//option
    contentComponent: DrawerBar,
    drawerBackgroundColor: 'transparent',
    overlayColor: 'rgba(0,0,0,0.5)',
  },
);

// 최상단 네비게이터
const AppNavigator = createSwitchNavigator(
  {
    Auth: AuthStack,
    Home: HomeStack,
    Info: InfoStack,
    News: NewsStack,
    Menu: MenuStack,
    AppDrawerNavigator,
  },
  {
    initialRouteName: 'Auth',
  },
);

export default createAppContainer(AppNavigator);

 

원하는 곳에서 onPress() 통해서 drawer menu 열기

import { withNavigation } from 'react-navigation';

.
.
.

<TouchableOpacity
  style={{ width: scaleWidth(66) }}
  onPress={() => this.props.navigation.toggleDrawer()}>
	<Text>메뉴열기</Text>
</TouchableOpacity>

.
.
.

export default withNavigation(Home);

 

순서대로 프로젝트에 적용하고 앱을 확인해 보았습니다. 아래처럼 drawer 메뉴가 작동하는것을 확인할 수 있었습니다 :)