React Native DrawerNavigator 사용하는 방법

리액트 네이티브로 코딩을 하다보면 네비게이터를 사용할일이 상당히 많이 생긴다.

나같은 경우에도 기존에 StackNavigator와 TabNavigator를 자주 사용했었다.

그러다가 이번에 기능을 조금 수정하면서 추가하게된 것이 바로 DrawerNavigator이다.

이름만 들어보면 무엇인지 조금 헷갈릴수도 있는데 스마트폰을 사용하는 사람이라면

충분히 익숙한 기능이다.

예를 들어 아래와 같은 화면이 있다고 가정해보면

왼쪽 제일 상단에 있는 햄버거 모양을 클릭하거나 화면을 왼쪽에서 오른쪽으로 밀면

이렇게 왼쪽에 메뉴를 선택할 수 있는 창이 생성되는 것이다.

기존에 나는 검색버튼을 왼쪽에 넣고 글쓰기 버튼을 오른쪽에 넣는 형태로 구성했었는데

이번에 게시판을 추가함에 따라 두가지 버튼을 오른쪽으로 밀어버리고

DrawerNavigator를 통해 게시판을 이동할 수 있도록 수정했다.

먼저 yarn add react-navigation 을 통해 설치를 한 후 진행한다.

구성은 라우팅을 진행해줄 컴포넌트 1개, 그리고 실제 페이지 2개이다. (몇개든 상관없음)

라우팅 컴포넌트는 BoardDrawer.js, 실제 페이지는 Board.js/Market.js의 이름을 가지고 있다고 가정한다.

[BoardDrawer.js]

import React, { Component } from 'react';

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

import { DrawerNavigator } from 'react-navigation';

import BoardRouter from './BoardRouter';

import MarketBoard from './MarketBoard';

class BoardDrawer extends Component {

  render() {

    return (

      <BoardNavigator />

    );

  }

}

const BoardNavigator = DrawerNavigator({

  BoardRouter: {

    screen: BoardRouter,

    navigationOptions: {

      header: null,

      drawerLabel: '익명게시판'

    }

  },

  MarketBoard: {

    screen: MarketBoard,

    navigationOptions: {

      header: null,

      drawerLabel: '장터게시판'

    }

  }

})

export default BoardDrawer;

소스가 간단하기 때문에 설명은 생략한다.

위처럼 라우팅 설정을 마쳤으면 실제 페이지에서는 다음과 같이 호출할 수 있다.

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

DrawerOpen으로 열어줄 수 있고 DrawerClose로 닫아줄 수 있다.

화면을 스와이프해서 열고 닫는건 기본적으로 설정되어 있으므로 따로 건드려줄 필요는 없다.

아, 그리고 나는 위 상태에서,

한번 더 네비게이터를 거치는 형태로 구성했었는데

당연하게도 DrawerNavigator의 props는 그 다음 컴포넌트까지밖에 전달이 되지 않아서

처음엔 DrawerOpen이 제대로 작동하지 않았다.

그래서 그 다음 네비게이터(BoardRouter.js)에서 

<BoardNavigator screenProps={this.props}/>

형태로 props를 넘겨주고 그 다음 Board.js 컴포넌트 등에서

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

의 형태로 호출했다.

혹시나 나중에 기억안날까봐 다시 정리함.