React Native Routing 설정 (react-navigation 사용하기)

리액트 네이티브에서 라우팅을 하기 위해서 다음과 같은 라이브러리를 사용할 수 있다.
@react-navigation/native
@react-navigation/drawer
@react-navigation/stack
@react-navigation/bottom-tabs
@react-navigation/material-top-tabs

@react-navigation/native는 필수로 사용되고, 나머지 네비게이션들은 필요에 따라 설치하여 사용한다.

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

네비게이션을 사용하기 위해서 최상단에 선언되야 하며, NavigationContainer 컴포넌트로 감싸진 자식 컴포넌트에서 네비게이션이 동작할 수 있도록 해준다.

NavigationContainer 하위에 Stack, tap, drawer, bottom-tabs 내비게이션을 사용하기 위해서 create${종류}Navigator 매서드로 컴포넌트를 만든다.

만든 컴포넌트의 Navigator로 하위에 Screen 컴포넌트를 감싸아 라우팅을 구현한다.

예시로 Drawer를 사용하였다

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";

import Test1 from "../components/Test1";
import Test2 from "../components/Test2";

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="Test_1" component={Test1} />
            <Drawer.Screen name="Test_2" component={Test2} />
        </Drawer.Navigator>
    );
}

export default DrawerNavigation;

 

🥭 리액트 네비게이션 네이티브의 의존성 설정을 위한 라이브러리 설치

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

• 라이브러리 설치 후 IOS앱은 npx pod-install ios를 다시 해준다.

🍹 cd ios && pod install && cd ..

• stack을 사용하기 위해서는 react-native-gesture-handler의 설치도 필요하다.
• drawer를 사용하기 위해서는 역시 react-native-gesture-handler의 설치와 함께 react-native-reanimated의 설치도 필요하다.
• 최상위 index.js에서 import 'react-native-gesture-handler'; 를 작성해준다.

NavigationContainer - 최상위 컴포넌트, 내비게이션의 최상위에 위치해야 한다.

Navigator는 여러 개의 Screen 컴포넌트를 자식으로 가진다.

Navigator의 자식으로는 Screen 컴포넌트만 와야 한다.

Screen 컴포넌트는 name, component 속성을 가지고, name이 스크린의 이름, component는 연결할 화면 컴포넌트를 지정한다.

Screen은 props로 항상 navigation과 route를 가진다.

Props.navigation.navigate(“컴포넌트 name”, 건네줄 state 객체); 로 화면을 이동할 수 있다.

Props.navigation.navigate.goBack() 메서드로 뒤로 이동할 수 있다.
🌭 https://reactnavigation.org/docs/navigation-prop/ 에서 다른 navigation의 메서드를 확인할 수 있다.

스크린에 다른 네비게이션 컴포넌트를 연결하여 중첩해서 네비게이션을 구현할 수 있다.

🌽 라우팅을 하며 값을 전달하기 위해서 다음과 같이 Props를 전달할 수 있다.

건네받은 state는 props.route.params에 객체 형태로 건네받을 수 있다.

<Drawer.Screen name="Test8">
	{props => <Test8 {...props} testProps={"Test Props Data Default"}/>}
</Drawer.Screen>

참고 자료 - 공식 문서 : https://reactnavigation.org/docs/getting-started/

https://reactnavigation.org/docs/navigation-prop/

 

🥖 react navigation stack을 사용할 때, stack의 내용물을 초기화하고 싶은 경우가 있다. (push, replace, navigate를 이용한 이동 외)

이 경우, reset 메서드를 사용하면 된다.

import {useNavigation} from '@react-navigation/native';
const navigation = useNavigation();

navigation.reset({
  index: 0,
  routes: [{name: 'Home'}],
});

위의 경우 Home 스크린으로 이동하고, 이전의 이동 기록이 모두 지워졌기에 뒤로가기할 수 없다.