[React-Native] Drawer | Style 설정 01

* Side Drawer는 모든 Screen에서 공통으로 열림 -> style도 공통으로 사용됨

-> <Drawer.Navigator> 태그 안에서 사용되겠구나

    (Stack 때와 마찬가지!!)

 

---

 

• drawerType

<Drawer.Navigator
    initialRouteName="Home"
    drawerType="front"
>

drawerType="front"

  - front : 뒤에 있는 화면은 고정된 채 side drawer가 열림

 

drawerType="slide"

  - slide : side drawer가 튀어나온만큼 뒤의 화면도 옆으로 밀림

 

drawerType="permanent"

  - permanent : side drawer가 열려서 닫히질 않음

 

 

---

 

• drawerPosition

drawerPosition='right'

  - side drawer가 오른쪽에서 열리도록 함 (default는 왼쪽)

 

 

 

---

 

• drawerStyle / drawerContentOptions

drawerStyle={{
            backgroundColor: '#c6cbef',
            width: 200
          }}
          
drawerContentOptions={{
            activeTintColor: 'red',
            activeBackgroundColor: 'skyblue'
          }}

  - Header Bar에 style 주는 법

  - drawContent : 'Home'과 'User' 같은 링킹되는 버튼

  -> drawContentOptions : drawContent에 style을 주기 위한 방법

 

 

 

---

 

 

* DrawContent 커스터마이징하기

 

- 원하는 링크로 이동

- alert 창 띄우기

 

import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem
} from '@react-navigation/drawer';

  - 사용할 모듈들을 import

 

drawerContent={props => <CustomDrawerContent {...props} />}

  - drawContent 라는 property를 추가

  - CustomDrawerContent 함수로부터 props 인자 받아오기

 

CustomDrawerContent = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props}/>
      <DrawerItem
        label="Help"
        onPress={()=>Linking.openURL('원하는_링크')}
      />
        <DrawerItem
        label="Info"
        onPress={()=>alert('원하는_메시지')}
      />
    </DrawerContentScrollView>
  )
}

  - 상단에 정의한 CustomDrawerContent 함수

  - 'Help' component를 누르면 입력한 url로 넘어가고,

  - 'Info' component를 누르면 alert 창이 뜨도록

 

 

Help 버튼 누르면

Info 버튼 누르면