[React Native] React Nativgation 적용하기 - 1

react native cli로 빌드해서 expo로 install을 해도 되지만 npm이라는 자바스크립트를 위한 패키지 관리자를 사용했다. 

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

공식 문서 (https://reactnavigation.org/docs/getting-started/) 를 보면 잘 설명되어있다!

Mac에서 IOS 빌드를 위한 무언가를 설치해야하는데 나는 해당사항이 없어서 스킵!

 

 

1. NavigationContainer

상위 navigator를 감싸는 적어주는 container를 써줘야한다. 

navigator에 더해서 쓸 수 있는 props들이 있는데 나중에 다크모드, 라이트모드 만들때도 유용하게 쓸 수 있다.

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


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

 

 

 

2. Navigator

다양한 navigators가 있는데 각 같은 거여도 ios, android마다 디폴트 움직임이 다르기도하고, 추가할 수 있는 이벤트가 다르다. ios가 확실히 더 다양하다. ㅠㅠ ... 크흡.. 왼도우 쓰는 나 눈 감아...

 

다양한 navigator보기

 

bottom tabs 와 native stack 을 함께 써볼것이다!

 

◾ bottom tabs

말그대로 모바일 어플리케이션 아래쪽에 고정되어있는 tab menu을 뜻한다. 탭에 있는 메뉴를 누르면 해당 페이지로 바로바로 이동할 수 있게 도와준다! 

 

 

설치하기

npm install @react-navigation/bottom-tabs

 

먼저 선언해서 tab을 만들어준다. 아래처럼 만들어주면 Home, Settings 라는 메뉴가 두개 만들어진다. 클릭을 하면 뒤에 붙어있는 component로 이동하는 것이다! 

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

const Tab = createBottomTabNavigator();

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

 

style 입히기

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

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator 
    screenOptions={{
      tabBarStyle: {backgroundColor:"#1e272e"} , 
      tabBarActiveTintColor:"gold",
      headerStyle:{ backgroundColor: "#1e272e" }, 
      headerTitleStyle : {color: "black"},
      tabBarLabelStyle: { fontSize: 12, fontWeight:"600"}
      }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

screenOptions 라는 Props를 쓸 수 있는데, 그 안에 들어가있는 옵션들이 다양하다. tabBarStyle를 써서 배경색을 바꿀 수도 있고, 텍스트 색상을 변경하는 듯 css적인부분도 수정할 수 있다. 역시나 공식문서에 잘 나와있다.

 

 

 

 

 

◾ Stack vs Native Stack

컴포넌트 안에 있는 버튼을 클릭했을 때 다음으로 넘어가는 동작의 메뉴도 만들 수 있다. 쉽게 말하자면 스크린과 새로운 스크린 사이를 이어주는 위쪽에 있는 메뉴이다. stack 과 native stack 두가지가 있는데 두 가지가 동작은 비슷한데 살짝 다르다. 

 

디폴트 값이라고 할 수 있는 stack이 있는데, ios와 android 두 가지 모두에게 유사한 룩 앤 필을 선사해주고, 자바스크립트 기반으로 애니메이션을 커스텀마이징할 수 있어 자유도가 높은 편이다. ios나 android에서 제공하는 navigation을 쓰는게 아니라는 말이다. 그래서 native보다 성능이 떨어질수도 있다고 말한다. 

native stack은 모바일뿐 아니라 web에서도 베이직한 모습을 제공해준다. 기본적으로 큰 제목과 같은 기능을 제공해주지만 stack만큼 커스터마이징을 할 수 없다는 것이 특징이다. 왜냐 이건 ios나 android가 제공하는 navigator를 사용하기 때문이다. 

 

 

 

 

native stack 설치하기

npm install @react-navigation/native-stack

 

아래와 같이 기본적인 구성을 할 수 있다.  

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

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

 

 

stack메뉴에서 어떻게 이동을 하냐면! 이 때 Navigation prop 이라는 것이 나온다.(클릭하면 공식문서로 이동)

nativgation이라는 것이다. props를 이용해서 스크린으로 바로 이동할 수 있게 해준다! 뭔가 넘나 이동이 쉬워보이는 이 느낌~~~! Home이라는 스크린을 만들어주고 그 안에 "셋팅으로 가기" 라는 텍스트를 넣어준다!!

Home이라는 스크린에 뜬 "셋팅으로 가기"를 누르면 Setting 스크린으로 이동하고 위쪽에 뒤로가기 아이콘이 뜰겁니다. 그걸 누르면 다시 Home으로 갈수있다! 유레카!!

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

const Stack = createNativeStackNavigator();

const Home = ({navigation: { navigate}}) => 
   <TouchableOpacity onPress={() => navigate("Setting")}>
      <Text>셋팅으로 가기</Text>
   </TouchableOpacity>

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

navigation안에 navigate를 썼는데, 이건 다른 스크린으로 이동하게 도와준다.  goBack 이라는 것도 있는데 이건 말그대로 뒤로가기이다. 이 외에도 다양한 prop가 있다! 

 

 

 

 

 

 

 

 

 

 

📚 니꼬쌤의 리액트 네이티브 강의를 참고해서 정리한 내용입니다!