[React Native] React Navigation

React Navigation

 
React Native에서 네비게이션을 구현하는데 사용되는 많은 라이브러리들이 존재한다.
그 중 대표적인 것이 React Navigation이다. ( React에서 react-router-dom을 사용하여 라우팅을 구현한다면, React-Native에서는  React Navigation을 사용한다)
 
React Navigation를 적용해보자
 
 

패키지 설치

npm install @react-navigation/native

npm install @react-navigation/stack

 
 
이제 이 네비게이션을 바탕으로 App.tsx를 수정해 보자

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="initial">
        <Stack.Screen name="One" component={One} />
        <Stack.Screen name="Two" component={Two} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

createNativeStackNavigator 를 이용 하여 stack 를 만들어줌으로 내장 기능을 사용할 수 있다.
Navigator 부모,  Screen -자식 인 구조이다.
 
Screen에 들어가는 name 은 route 이름이 되고, component 는 보여주고 싶은 component 를 뜻한다.
 
자세한 props 들은
https://reactnavigation.org/docs/stack-navigator

Stack Navigator | React Navigation

 
에서 확인할 수 있다.
 
 

 

이제 HomeSecreen에서, Detail버튼을 누르면 DetailScreens로 이동하도록 해보겠다.

Navigator 설정

 

//App.tsx

const Stack = createStackNavigator();

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="ICT Farm">
        <Stack.Screen name="HomeScreens" component={HomeScreens} />
        <Stack.Screen name="DetailScreens" component={DetailScreens} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 
 

Naviagation Props

1. navigation.navigate(”Page”)- 페이지 이동하기

//HomeScreens.tsx
import React from 'react';
import {View, Button} from 'react-native';
import {useNavigation} from '@react-navigation/native';

const HomeScreens = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Button
        title="Go to Detail"
        onPress={() => {
          navigation.navigate('DetailScreens'); 
        }}
      />
    </View>
  );
};

export default HomeScreens;

 
컴포넌트에서 navigation props를 받아와서, navigation.navigate(스택 이름)으로 이동한다. 이 방식은 스택에 쌓여서 이동하는 방식이다( 뒤로가기시 페이지로 돌아옴)
 
 

 

 
 

navigate() 메소드를 사용하면 같은 페이지로는 여러번 이동하지 않고 무시된다. 
즉, 같은 화면으로 이동할 경우, 화면이 쌓이지도 않고, 화면 전환 효과가 보이지도 않는다 
 
ex)

navigation.navigate('RouteName', { id : route.params.id })

Home -> Details (id:1) -> Details (id:2) -> Details (id:3) 인 이동이 있다고 했을 때, stack에는 Home화면 1개와 Details화면 1개만 쌓인다. 
 
즉, 가장 마지막 Details(id:3)에서 뒤로가기를 누르면, Home화면이 나온다.

만약, 같은 컴포넌트로 이동해야 할 경우가 생긴다면 어떻게 할까? 아래에서 살펴보자.

 
 

2. navigation.push(”Page”) - 같은 페이지로 이동하기

 
만약, 같은 컴포넌트로 이동해야 할 경우가 생긴다면 어떻게 할까?
이때는, push() 메서드를 사용한다.
push매서드를 사용하면, 새롭게 컴포넌트 스택이 쌓인다

import React from 'react';
import {View, Button} from 'react-native';
import {useNavigation} from '@react-navigation/native';

const HomeScreens = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
       <Button
        title='Go to Profile again'
        // 같은 페이지로 이동
        onPress={() => navigation.push('HomeScreens')}
      />
      <Button
        title="Go to Detail"
        onPress={() => {
          navigation.navigate('DetailScreens'); 
        }}
      />
    </View>
  );
};

export default HomeScreens;

 
HomeScreens-> HomeScreens 와 같이 같은 화면으로 이동할 때조차 각각의 HomeScreens 화면이
stack에 순서대로 쌓이게 되고, 뒤로가기(pop())했을 때는 stack의 가장 위에서부터 하나씩 제거해나간다.
 
 

3. navigation.goback() - 뒤로가기

기본적으로 페이지를 이동하면 Native Stack Navigator 헤더에 뒤로가기 버튼이 자동으로 생성된다.
만약 동적으로 뒤로가기를 하려면 goBack() 메소드를 사용한다.
 

 <Button 
        title='Go back' 
				// 뒤로가기
        onPress={() => navigation.goBack()} />

 
 

4. navigation.popToTop()

react-native 는 react와는 다르게 화면이 stack 형식으로 계속 쌓이는 방식이다. 쌓이는 stack의 depth가 깊어지면, 쌓인 stack들을 한 번에 치워줄 필요가 있다. 즉, 스택의 가장 윗 페이지로 이동할 필요가 있다.
그럴 때 사용하는 것이 popToTop() 키워드이다
 
 

 

References

https://velog.io/@sunohvoiin/React-Native-React-Navigation

[React Native] React Navigation

https://velog.io/@slobber/React-native-navigation-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0

React-native  navigation 이용하여 개발하기

https://velog.io/@hye_rin/ReactNavigation-%EB%82%98%EB%A7%8C-%EB%AA%B0%EB%9D%BC-navigate%EB%9E%91-push-%EC%B0%A8%EC%9D%B4%EC%A0%90

[ReactNavigation] 나만 몰라 navigate랑 push 차이점 🫠