React Native - Draw Navigation 설정 팁(링크/자료) 모음(*필자는 expo사용)

expo로 react-native 프로젝트를 진행할 때, 사이드 메뉴를 위한 네비게이션 라이브러리를 찾아보고 프로젝트를 설정하면서 참고했던 자료들을 공유합니다.

우선 제 개발환경은 M1 MacBook Air RAM 16GB입니다.
앱 확인용 기기 - 삼성 갤럭시 노트 10

<개발 환경 관련 참고 링크들>

1. 라이브러리 환경 설정에 큰 도움이 된 유튜브 영상(링크)
   expo를 사용한 리액트 네이티브 프로젝트를 진행 중이었기에 영상에서 실행한 것과 완벽히 똑같이 실행한 것은 아니지만 이 영상이 라이브러리 사용법을 익히는데 가장 큰 도움이 되었습니다.

2. 애플 실리콘 M1 용 Homebrew 설치

3. Install in Expo project | NativeBase
   중간에 설치가 제대로 되어있지 않아서 설치를 위해 참고

3. Getting Started · React Native Paper

4. Checkbox - Expo Documentation
   이 두개는 프로젝트에서 사용 중인 라이브러리를 재설치하느라 참고.
   각각 라디오 버튼과 체크박스 라이브러리 입니다.

<추가 세부 설정 참고 자료들>

헤더 로고 가운데 두는 법(링크)

React native에서 이미지 크기 자동 조절(링크)

헤더에 이미지 삽입(링크)

Icons - Expo Documentation 아이콘 사용법(링크)

이 유튜버 영상의 코드가 헤더에 프로필 넣는 법을 가장 간단하게 따라하기 쉬웠음. 푸터도 함께 들어간다.

<에러관련 링크>

Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app -> 네비게이션 콘테이너는 하나만 사용

error: reanimated 2 failed to create a worklet, maybe you forgot to add reanimated's babel plugin?
(+링크)
-> reanimated 관련 오류 : 설치 및 추가 후 expo start —clean으로 해결

필자의 코드와 작동 영상

import * as React from 'react';
import { Button,TouchableOpacity,Image,View, StyleSheet,Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
//import { DrawerItems, DrawerNavigation } from 'react-navigation';

import MainPage from './pages/MainPage';
import LoginPage from './pages/LoginPage';
import StudyRoom from './pages/StudyRoom';
import ReadingRoom from './pages/ReadingRoom';
import TotalUses from './pages/TotalUses';
import BookSearch from './pages/BookSearch';

import PushSetting from './setting/PushSetting';
import LangSetting from './setting/LangSetting';

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

import {Ionicons} from '@expo/vector-icons';



const Drawer = createDrawerNavigator();

const CustomDrawer = props => {
  return (
    <View style={{ flex: 1 }}>
      <DrawerContentScrollView {...props}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: 15,
            backgroundColor: '#f6f6f6',
            marginBottom: 10,
          }}
        >
          <View>
            <Text>로그인 사용자: 홍길동(2018xxxxxx)</Text>
            
          </View>
          <Ionicons name="person-circle-outline"size={35}></Ionicons>
        </View>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
      <TouchableOpacity
        style={{
          position: 'absolute',
          right: 10,
          left: 10,
          bottom: 280,
          backgroundColor: '#009DAE',
          padding: 10,
          borderRadius: 3
        }}onPress={() => alert('Link to logout')}
      >
        <Text style = {styles.logoutText}>로그아웃</Text>
        
      </TouchableOpacity>
    </View>
  );
};
function HeaderR() {
  return ( <Ionicons name="notifications-outline"size={30}></Ionicons>);
 
}

const DrawerNavigator = () => {

  
  return (
      <Drawer.Navigator screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: 'transparent',
          elevation: 0,
          shadowOpacity: 0,
        },
        headerTitle: '',
      }}
      drawerContent={props => <CustomDrawer {...props} /> } 
      >
        <Drawer.Screen name="홈" component={MainPage} 
        options={{
          headerTitle: () => (
            <Image style={{ width: 100,height:40,resizeMode: 'contain' }} source={require("./assets/images/logo_J.png")} />
          ),
          headerTitleAlign: 'center',
          headerRight: ()=> <HeaderR/>,
          headerRightContainerStyle: {paddingRight: 10},
          headerLeftContainerStyle: {paddingRight: 10}
        }}/> 
        <Drawer.Screen name="스터디룸 시설물 예약" component={StudyRoom} 
        options={{
          headerTitle: () => (
            <Image style={{ width: 100,height:40,resizeMode: 'contain' }} source={require("./assets/images/logo_J.png")} />
          ),
          headerTitleAlign: 'center',
          headerRight: ()=> <HeaderR/>,
          headerRightContainerStyle: {paddingRight: 10},
          headerLeftContainerStyle: {paddingRight: 10}
        }}/> 
        <Drawer.Screen name="열람실 좌석 배정" component={ReadingRoom} /> 
        <Drawer.Screen name="통합 이용 내역" component={TotalUses} /> 
        <Drawer.Screen name="자료 검색" component={BookSearch} /> 
        <Drawer.Screen name="푸시 설정" component={PushSetting} /> 
        <Drawer.Screen name="언어 설정(Language Setting)" component={LangSetting} /> 
      </Drawer.Navigator >
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  logoutBox: {
    //position: 'absolute',
    flex: 1,
    width:200,
    height:0,
    backgroundColor: '#009DAE',
  },
  logoutText: {
    fontSize: 15,
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
    //marginLeft: 30
  }
})

사실 여기서 수정하고 싶은 부분은 많지만, 특히 옵션을 어떻게 재사용 가능하게 만들어서 넣을지가 고민입니다. 깔끔한 코드나 잘쓴 코드는 절대 아니지만 그래도 필요하신 분들에게 도움이 되었으면 하는 마음으로 올립니다!

깃허브 링크