Sangil's blog

ReactNative로 TabNavigation을 구현하는 방법을 알아보겠습니다. (https://reactnavigation.org/docs/tab-based-navigation) 여기를 따라하면 되는데.. install 해야 하는 모듈때문에 엄청 고생했습니다 :( 간단히 테스트 하는건데.. 이글을 보고 부디 아까운 시간을 버리시는일은.. 없으면 좋겠네요 ^^;

일단 위 링크에 들어가면 npm install @react-navigation/bottom-tabs로 react navigation의 bottom-tabs의 모듈을 받으라고 합니다. 네네 해당 모듈을 받고 예제파일에있는 소스를 붙여넣으면 다른 모듈을 설치하라고 뜰겁니다. 그리고 해당 모듈을 설치하면 또 다른 모듈을... 또 설치하면 또 다른 모듈을.... 그런데, 모듈을 설치하는 과정중에 프로젝트가 깨진건지.. 뭔지.. 프로젝트가 잘 안올라 갈 때도 있습니다 ^^; 해결법을 몰라서 결국 삭제하고 다시 프로젝트 생성... 반복 OTL...(다른 블로그에도.. 설치해야할 모듈은 잘 설명이 안되어있더군요..하하)

일단 tabNavigation을 이용하려면 아래 모듈의 설치가 필요합니다.

@react-navigation/bottom-tabs    
@react-navigation/native
react-native-safe-area-context
react-native-screens

npm install 명령어를 이용해 위에 모듈을 설치해줍니다. 한번에 설치하고 react-native run-android 명령어로 프로젝트를 실행해주세요

그리고 예제에 있는 소스를 넣으면 정상적으로 화면이 올라오는 것을 볼 수 있습니다 :) 이렇게 간단한걸.... 모듈 설치하는데... 시간을 많이 버렸네요.

git 소스 -> https://github.com/ChoiSangIl/react-native-navigation-test

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

-실행화면