[React-native CLI] react native cli에서 navigation 설치 및 설정하기(npm)

이번 프로젝트에서는 하단메뉴와 하단메뉴 외의 화면을 이동해야 되는 경우가 필요하기 때문에 navigation을 설치해주어야 됩니다.

• react-navigation/native
• react-navigation/bottom-tabs
• react-navigation/stack

이와 같은 라이브러리를 사용할 예정입니다.

 

react-navigation 대해서

---

react-navigation

react-navigation은 React Native 애플리케이션의 네비게이션을 관리하기 위한 라이브러리 입니다.

 

react-navigation/native

React Navigation의 핵심 모듈이며, React Native 앱에서 네비게이션을 관리하는 데 필요한 주요 기능을 제공합니다.

주요 컴포넌트와 네비게이션을 설정하고 관리하기 위한 기능을 제공합니다.

 

react-navigation/stack

스택 네비게이션을 구현하는 데 사용합니다.

스택 네비게이션은 화면을 스택(Stack)의 형태로 관리하며, 새로운 화면은 push하거나 이전 화면으로 돌아가는 pop 동작을 제공합니다.

 

react-navigation/bottom-tabs

하단 탭 네비게이션을 구현하는 데 사용됩니다.

하단 탭 네비게이션은 화면 하단에 탭을 표시하고, 각 탭을 누르면 해당하는 화면으로 이동할 수 있도록 합니다.

 

설치하기

---

react-navigation/native 설치

npm install @react-navigation/native

 

react-navigation/stack 설치

npm install @react-navigation/stack

 

react-navigation/bottom-tabs 설치

npm install @react-navigation/bottom-tabs

 

한번에 설치할 수 있습니다.

// yarn 사용자
$ yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs

// npm 사용자
$ npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs

 

폴더구조

---

app
    |- navigation
    	|- BottomTabsNavigator.tsx // 하단 네비게이션
        |- StackNavigator.tsx // 스택 네비게이션
    |- screens
    	|- Home.tsx
        |- Calendar.tsx
        |- Chart.tsx
        |- More.tsx
        |- Record.tsx
    |- App.tsx

폴더구조는 블로그를 참고해서 작성해보았습니다.

https://babycoder05.tistory.com/entry/React-Native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0-%EC%85%8B%ED%8C%85-%EC%A0%95%EC%A0%81%ED%8C%8C%EC%9D%BC%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95

React Native 프로젝트 폴더 구조 셋팅 & 절대 경로 설정 & 정적파일(이미지) 경로 설정

 

화면구현 (옵션추가 안함)

---

하단 네비게이션 기능은 navigation/BottomTabNavigator.tsx에 구현해 줄거고요.

스택 네비게이션 기능은 navigation/StackNavigator.tsx에 구현해 줄겁니다.

 

하단 네비게이션에서는 Home, Calendar, Chart, More 스크린을 이동하게 만들 것이며,

+버튼 클릭시 Record.tsx 스크린으로 이동하게 구현하겠습니다.

 

screens/Home.tsx ~ Record.tsx

// react, react-native
import {Text} from 'react-native';

const Home = () => {
  return <Text>홈 스크린</Text>;
};

export default Home;

똑같이 작성해주었습니다.

 

navigation/BottomTabNavigator.tsx

// react, react-native
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

// components
import Home from '../screens/Home';
import Calendar from '../screens/Calendar';
import Chart from '../screens/Chart';
import More from '../screens/More';

const BottomTabsNavigator = () => {
  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Calendar" component={Calendar} />
      <Tab.Screen name="Chart" component={Chart} />
      <Tab.Screen name="More" component={More} />
    </Tab.Navigator>
  );
};

export default BottomTabsNavigator;

 

navigation/StackNavigator.tsx

// react, react-native
import {createNativeStackNavigator} from '@react-navigation/native-stack';

// components
import BottomTabsNavigator from './BottomTabsNavigator';
import Record from '../screens/Record';

const StackNavigator = () => {
  const Stack = createNativeStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen name="Main" component={BottomTabsNavigator} />
      <Stack.Screen name="Record" component={Record} />
    </Stack.Navigator>
  );
};

export default StackNavigator;

 

App.tsx

// react, react-native
import {NavigationContainer} from '@react-navigation/native';
import StackNavigator from './navigation/StackNavigator';

const App = () => {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
};

export default App;

 

오류수정

---

설치를 하고  화면에 추가하려고 하는데 android, ios 둘다 흰화면만 뜨고 아래와 같은 오류가 나왔습니다.

 

https://yehey-study.tistory.com/entry/RN-React-Native-build-%EC%97%90%EB%9F%AC-Invariant-Violation-requireNativeComponent-RNSScreenStackHeaderConfig-was-not-found-in-the-UIManager-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0

[RN, React Native] build 에러, Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the

이블로그 참고해서 ios는 해결했습니다.

 

npm install react-native-safe-area-context

npm install react-native-screens

cd ios
pod install

 

안드로이드는 이 블로그 보고 참고해서 수정했습니다.

https://dev.intoday.kr/42

React Native "RNSScreen" was not found in the UIManager

이블로그를 참고해서 수정했지만 pod를 추가했더니 android도 해결했습니다.

npm install pod

결국 오류가 pod를 설치안해서 생긴 오류인 것 같습니다.

 

출력 화면

---

아직 아무런 옵션을 추가안하기도 했고, +버튼도 안만들어서 stack 네비게이션도 구현하지 못했습니다.

다음 블로그에 옵션 추가에 대해 작성하겠습니다.