[React-native] 라우팅

Gyuhan Park·2023년 3월 26일

react-native

목록 보기

5/7

npm install

아니 라우팅하는데 뭐 이렇게 많은 라이브러리가 필요한 지 모르겠다
나도 최대한 설치안하려고 하나씩 설치해봤는데 다 설치해야 오류안나더라

@react-navigation/native 
@react-navigation/stack 
react-native-screens 
react-native-safe-area-context
react-native-gesture-handler

그리고 항상 하듯이

cd ios && pod install

최상단의 컴포넌트에서 <NavigationContainer> 으로 감싼다.
그 안에 <Stack.Navigator> 로 홈화면을 설정해준다.
그 안에 <Stack.Screen> 으로 네비게이션 하고싶은 화면들을 넣어준다.
name : 화면 이동 및 현재 화면 식별 시 사용

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

const Stack = createStackNavigator();
 const App = () => {
   return (
     <NavigationContainer>
       <Stack.Navigator initialRouteName="Home">
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Select" component={SelectScreen} />
       </Stack.Navigator>
     </NavigationContainer>
   );

화면 라우팅

Stack.Screen에서 설정한 component props로 navigation 이라는 props가 전달된다. navigation 객체 안에는 화면을 이동하는 함수들이 저장되어 있다.

Stack.Scrren에서 name props에 넘겨준 이름으로 navigation.navigate(name) 메소드를 이용하여 화면 전환이 가능하다.

navigate() 와 push() 로 화면이 가능한데 각각 다르게 작동하므로 적절하게 사용해야 한다.

화면을 이동하면 navigation 객체가 사라진다. 이동한 화면에서 또 다른 화면으로 이동하고 싶다면 App.tsx에 추가해야 한다.

// HomeScreen.tsx
const HomeScreen = ({ navigation }: any) => {
  return (
    <>
      <Header navigation={navigation} />
      ...

// Header > MenuBtn.tsx
const MenuBtn = ({ navigation }: any) => {
  return (
    <TouchableOpacity
      style={styles.menuBtn}
      onPress={() => navigation.navigate('Select')}
    >

참고로 navigation 설정이 완료되면 헤더가 자동으로 생성되는데 헤더를 스타일링할 수 있는 많은 props들이 만들어져 있고, 미리 만들어둔 헤더가 있다면 지워줄 수 있다.

<Stack.Navigator
	initialRouteName="Home"
	screenOptions={{ headerShown: false }}
    >
...

파라미터 넘겨주기

화면을 넘어갈 때 현재 화면에 있는 데이터를 그 다음 화면에 넘겨줘야 할 때가 있다.
웹에서는 url로 넘겨줄 수 있는데 앱에서는 navigate() 인자로 넘겨줘야 한다.

// Header > MenuBtn.tsx
const MenuBtn = ({ navigation }: any) => {
  return (
    <TouchableOpacity
      style={styles.menuBtn}
      onPress={() => navigation.navigate('Select', {
      	name: 'Kim';
      })}>
      ...

// Stack.Screen name="Select" component={SelectScreen}

const SelectScreen = ({ route }: any) => {
	const { name } = route.params;
	...
}

중첩 라우팅

화면 뿐만 아니라 화면에 하단 탭바를 사용하게 되었는데 RN은 stack 구조를 많이 적용한 게 느껴진다.
하단 탭도 화면 라우팅과 유사하게 Tab.Navigator, Tab.Screen 이 존재한다.

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

const Tab = createBottomTabNavigator();

export const Tab = () => {
  return (
      <Tab.Navigator>
        <Tab.Screen
          name="tab1"
          component={HomeScreen}
          ...
        />
        <Tab.Screen
          name="tab2"
          component={Request}
          ...
        />
        <Tab.Screen
          name="tab2"
          component={MyPage}
          ...
        />
      </Tab.Navigator>
  );
};

보통 화면안에 하단탭이 존재하므로 위에 작성한 Tab 컴포넌트를 Stack.Screen props로 넣는다.

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

const Stack = createNativeStackNavigator();

export const CommentStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Tab} />
        <Stack.Screen
          name="New"
          component={newScreen}
        />
      </Stack.Navigator>
	</NavigationContainer>
   
  );
};

이렇게 만든 중첩 라우팅의 구조는 다음과 같다.

Stack Navigator 1 (Home)

Tab Navigator 1 (HomeScreen)

Tab Navigator 2 (Request)

Tab Navigator 3 (MyPage)

Stack Navigator 2 (New)

New 화면에서 Home 화면으로 라우팅하면 HomeScreen이 뜨게 된다.
다른 탭으로 바로 이동하는 방법도 존재한다.

navigation.navigate('Home', {
  screen: Request
})

TMI

제대로 설정했는데 계속 경로를 찾을 수 없다고 나오는거다!!!
그래서 진짜 억까당하는 심정이였는데 처음으로 돌아가자 마인드로 플로우대로 다시 살펴봤는데 뭐야(?) 최상단 컴포넌트가 잘못 설정되어 있었다,,,,,,,
탭만 설정했다가 화면이 추가되면서 화면 안에 탭을 넣었는데 최상단 컴포넌트에 탭 컴포넌트가 들어가 있는 거였다,,,,,,
컴퓨터는 거짓말을 안해 😭 다른 분들은 설정 확인 정확히 하시길 바래요,,,

RN navigation
RN Navigation 중첩라우팅