React Native / drawer navigation

 

 

1. Install

npm install @react-navigation/native

expo install react-native-gesture-handler react-native-reanimated
# expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/drawer

 

 

2. drawer.js 파일 생성

 

route 폴더 안에 drawer.js / aboutStack.js 파일 생성 

 

 

drawer.js

import React from 'react';
import {
    createDrawerNavigator,
    DrawerContentScrollView,
    DrawerItemList,
    DrawerItem,
    } from '@react-navigation/drawer';
    
import HomeStack from './homeStack';
import AboutStack from './aboutStack';

const Drawer = createDrawerNavigator();

export default function MyDrawer() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="Home2" component={HomeStack} />
            <Drawer.Screen name="About2" component={AboutStack} />
        </Drawer.Navigator>
    );
}

 

 

aboutStack.js 

 

import React, { useState } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import About from '../screens/about'


const Stack = createStackNavigator();

export default function AboutStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}

 

 

3. App.js 파일에 drawer 반영

 

import MyDrawer from './routes/drawer';

export default function App() {

  return (
      <NavigationContainer>
        <MyDrawer />
      </NavigationContainer>
    );
}

 

4. header.js 추가 (선택! 필수아님)

최상위 폴더에 shared 폴더 추가. 해당 폴더에 header.js 파일 추가

Stack Navigator는 기본적으로 header를 제공함 이를 원하는 header로 변경하기 위함

 

GameZone 이라 써진 부분 처럼 header 제공   출처 The Net Ninja 유투브

 

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


export default function Header({navigation}){
    return (
        <View style={styles.header}>
            <View>
                <Text style={styles.headerText}>GameZone</Text>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    header: {
        width: '100%',
        height: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    headerText: {
        fontWeight: 'bold',
        fontSize: 20,
        color: '#333',
        letterSpacing: 1,
    },
});

 

 

 

5. homeStack.js

import React, { useState } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Home from '../screens/home'
import ReviewDetail from '../screens/reviewDetail'
import { StyleSheet, Button, Text } from 'react-native';
import Header from '../shared/header'; // 추가
import { MaterialIcons } from '@expo/vector-icons';  //추가

const Stack = createStackNavigator();

export default function HomeStack() {

    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: '#f4511e',
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
            }}
        >
            <Stack.Screen name='Home' component={Home}
            /////////////////////////////////////////////////////////////
                options={({route, navigation})=>({
                    headerTitle: props => <Header {...props} />, // header.js로 헤더 내용 결정
                    headerLeft: () => (
                        <MaterialIcons name='menu' size={28} 
                        onPress={() => navigation.openDrawer()}
                        style={styles.icon}
                        />
                    ),
             ////////////////////////////////////////////////////////////// 해당부분 추가
                    headerRight: () => (
                        <Button
                        onPress={() => alert('This is a button!')}
                        title='Info'
                        color='red'
                        />
                    ),
                    headerStyle:{
                        backgroundColor: 'blue'
                    }
                })}/>
            <Stack.Screen name='ReviewDetail' component={ReviewDetail} />
        </Stack.Navigator>
    );
}

const styles = StyleSheet.create({
    icon: {
        position: 'absolute',
        left:
    }
});

 

 

 

 

(왼) 위에 햄버거 버튼 클릭시 (오) 슬라이드 열림

 

 

 

https://reactnavigation.org/docs/drawer-based-navigation/