React Native - Navigation

페이지 간 이동

개발환경 : Windows, expo

메인 화면과 로그인 화면 간 이동을 React Native 환경에서 구현하기 위해서 아래와 같은 순서를 거칩니다.

순서

1. 필요한 모듈 설치하기

React Native에서는 React Navigation 이라는 모듈을 별도로 설치하여 구현할 수 있습니다. React Navigation docs 에 나와있는 순서대로 명령어를 입력하여 내 프로젝트에 적용합니다.

(모듈들이 잘 설치됐는지 확인하려면 반드시 package.json의 dependencies 요소들에 버전이 잘 나와있는지로 볼 수 있습니다.)

2. React Navigation을 앱에 적용하기

(1) NavigationContainer import 하기

React Native의 최상위 파일인 App.js 에 NavigationContainer 로 감쌉니다. 이때 해당 컨테이너는 반드시 Provider 컨테이너 하단에 한번만 선언해야함에 유의합니다.

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

export default const App = () => {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

(2) createNativeStackNavigator import 하기

createNativeStackNavigator는 Screen과 Navigator의 2가지 속성을 포함하는 객체를 반환하는 함수입니다. 메인화면과 로그인화면간 이동을 위해 필요합니다.

<기본적인 사용법>
NavigationContainer 컨테이너 하단에 작성합니다.

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

const Stack = createStackNavigator();

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

이때 Stack 객체를 선언 후 페이지간 이동이 일어날 컴포넌트의 name을 지정하고 그리고 그 행위를 실제로 진행할 컴포넌트를 component에 선언합니다.

👾만약 페이지 상단에 name속성이 보이는데 이를 숨기고 싶다면?
: options = {{ headerShown: false}}을 Stack.Screen내에 선언합니다.

3. 전체 코드

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Provider } from 'react-redux';
import { store } from './redux/store';
import MainScreen from './screens/MainScreen';
import LoginScreen from './screens/LoginScreen';

const Stack = createNativeStackNavigator(); //Screen, Navigator 속성 객체 반환 함수

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen options = {{ headerShown: false}} name="Login" component={LoginScreen}/>
          <Stack.Screen options = {{ headerShown: false}} name="Main" component={MainScreen}/>
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

이제 페이지 간 Navigate을 할 준비사항은 모두 끝났습니다.

페이지 이동 메서드: replace()

<기본 구조>

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

const componentName = () => {
  const navigation = useNavigation();
  navigation.replace("Declare Stack.screen's name");
}

useNavigation을 import 후, 이동하고자 하는 화면의 이름(루트 컴포넌트에 선언한 Stack.Screen의 name)을 선언하여 페이지 간 이동을 구현할 수 있습니다.