[React-Native] 4. react-navigation V5 설정하기

react-navigation이란?

 React-native 애플리케이션의 네비게이션과 히스토리를 간단하게 관리할 수 있는 라이브러리이다.

쉽게 말해 스크린 간 이동을 도와주는 라이브러리!

 

공식 사이트: reactnavigation.org/

React Navigation | React Navigation

 

1. 설치

 아래 명령어들로 react-navigation v5 라이브러리와, 이것을 사용하기 위한 라이브러리를 설치해준다.

npm install --save @react-navigation/native
npm install --save react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

react-navigation v4부터 필요한 Navigation을 각각 설치해줘야 한다고 한다.

우선, Material Bottom Tab Navigation만 한 번 사용해보자!

 

 

2. Material Bottom Tab Navigation 사용해보기

 Material Bottom Tab Navigation은 구글 Material 디자인이 적용된 하단 Tab 네비게이터이다.

아래 명령어로 라이브러리를 설치해준다.

npm install --save @react-navigation/material-bottom-tabs react-native-paper

 

 2-1. react-native-vector-icons 설치하기 

 이 Navigation은 react-native-vector-icons라는 라이브러리가 추가적으로 필요하다. 아래 명령어로 설치해준다.

npm install --save-dev @types/react-native-vector-icons

 react-native와 설치한 react-native-vector-icons를 연결을 해주어야하는데, react-native 0.60 버전 이상부터는 수동으로 연결해주어야 한다.

 

 ios는 아직 개발을 못하는 관계로,, Android 방법만 살펴보자!

 

 android/app/build.gradle 파일의 아래에 다음과 같은 내용을 추가한다.

apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

 

 그리고, node_modules/react-native-vector-icons/Fonts/ 하위에 파일들을 android/app/src/main/assets/fonts 폴더로 복사합니다. 해당 폴더가 없으면 만들어주기!

 

 이제 Android Studio로 프로젝트의 android 경로로 Android 프로젝트를 열고 Gradle sync를 시킨다.

 

>>에러 발생..과 해결방법은 더보기 참고:)

그런데 두두둥..! 아래와 같은 에러가 발생했다..!

java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7

→ 이건 gradle 버전이 낮아서 생긴 문제라 {프로젝트 루트}/gradle/wrapper/gradle-wrapper.properties 파일에서 distributionUrl 부분에 있는 gradle 버전을 아래와 같이 6.3으로 설정해주면 해결!

distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-bin.zip

 

그럼 이제 다른 에러가 발생...

Cannot add task ‘bundleDebugJsAndAssets’ as a task with that name already exists.

→ 이건 아까 android/app/build.gradle 파일 여기 적어뒀던 apply from: “../../node_modules/react-native/react.gradle” 이 부분을 제거하면 해결된다.

 

이렇게 해주고 Android Studio에서 "Sync project with Gradle files" 이 버튼을 눌러주거나, cmd 창에서 안드로이드 경로로 들어간 다음, "gradlew clean build"를 실행하면 된다!

 

 

 2-2. Material Bottom Tab Navigation 사용 예제

아래 코드처럼 한 번 적용해봤다!

import "react-native-gesture-handler";
import React from "react";
import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs";
import Icon from "react-native-vector-icons/MaterialIcons";
import TabFirst from "./TabFirst";
import TabSecond from "./TabSecond";
import TabThird from "./TabThird";
import TabFourth from "./TabFourth";

import { NavigationContainer } from "@react-navigation/native";

const MaterialTab = createMaterialBottomTabNavigator();

const MaterialTabNavi = () => {
  return (
    <MaterialTab.Navigator>
      <MaterialTab.Screen
        name="TabFirst"
        component={TabFirst}
        options={{
          tabBarColor: "#281b39",
          tabBarLabel: "Frist",
          tabBarIcon: ({color}) => <Icon name="home" color={color} size={26} />,
        }}
      />
      <MaterialTab.Screen
        name="TabSecond"
        component={TabSecond}
        options={{
          tabBarColor: "#0e141d",
          tabBarLabel: "Second",
          tabBarIcon: ({color}) => (
            <Icon name="people" color={color} size={26} />
          ),
        }}
      />
      <MaterialTab.Screen
        name="TabThird"
        component={TabThird}
        options={{
          tabBarColor: "#E64A19",
          tabBarLabel: "Third",
          tabBarIcon: ({color}) => (
            <Icon name="message" color={color} size={26} />
          ),
        }}
      />
      <MaterialTab.Screen
        name="TabFourth"
        component={TabFourth}
        options={{
          tabBarColor: "#524365",
          tabBarLabel: "Fourth",
          tabBarIcon: ({color}) => (
            <Icon name="settings" color={color} size={26} />
          ),
        }}
      />
    </MaterialTab.Navigator>
  );
};


export default () => {

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

└ 여기서 tabBarIcon은 무조건 추가해줘야 한다!

 

>프로젝트 구조

 Project

  ...  

 └ TabFirst

    └ index.tsx

 └ TabSecond

    └ index.tsx

 └ TabThird

    └ index.tsx

 └ TabFourth

    └ index.tsx

  ...

 └ App.tsx

 

 

TabFirst 등의 폴더 안에 있는 index.tsx 내용은 대충 아래처럼 생성해줬다.

import React from "react";
import Styled from "styled-components/native";

const Container = Styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`;

const Label = Styled.Text``;

const TabFirst = () => {
  return (
    <Container>
      <Label>This is First Tab</Label>
    </Container>
  );
};

export default TabFirst;

 

 

이렇게 하면, 아래처럼 실행되는 걸 확인할 수 있다!!!! 야호!

 

 

하단 tab 네비게이터

 

이 외, 다른 Navigation 사용법은 여기 깔끔하게 정리되어 있슴당

 

---

출처

-velog.io/@dskim-code/NoClassFound

-gale-lee.medium.com/react-native-code-push-3-237b8c4360d7

-dev-yakuza.posstree.com/ko/react-native/react-navigation-v5/#bottom-tab-navigation-%EC%82%AC%EC%9A%A9%EB%B2%95

-dev-yakuza.posstree.com/ko/react-native/react-native-vector-icons/