React Native Navigation을 이용해 페이지 전환하기

개요

이 글에서는 모바일 엡에서의 페이지 전환을 위해 react-navigation (v3) 라이브러리를 이용해  보도록 하겠습니다.

라이브러리 설치

프로젝트 루트에서 다음 명령어를 입력해 라이브러리를 추가해 주세요.

$ npm install --save react-navigation
$ npm install --save react-native-gesture-handler

다음으로 설치된 라이브러리를 링크합니다.

$ react-native link

네비게이션의 종류

1. createStackNavigator

View를 Stack으로 쌓는 일반적인 네비게이터 입니다.

2. createSwitchNavigator

로그인, 회원가입 등을 할 때 (사용자가 임의로 뒤로가기 등을 할 수 없는) 사용하면 유용한 네비게이터 입니다.

3. createBottomTabNavigator

하단에 탭 형태로 생성되는 네비게이터 입니다.

4. createAppContainer

최상위 네비게이션을 생성합니다.

Navigator 클래스 생성하기

본 예제에서는 StackNavigator을 예시로 설명합니다.

이제 페이지 간 라우팅을 담당해줄 AppNavigator.js 클래스를 생성합니다.

import { createStackNavigator, createAppContainer } from 'react-navigation';
import FirstScreen from './FirstScreen';
import SecondScreen from './SecondScreen';
 
 
const AppNavigator = createStackNavigator({
  FirstScreen: { screen: FirstScreen },
  SecondScreen: { screen: SecondScreen }
});
 
export default createAppContainer(AppNavigator, {
  initialRouteName: 'FirstScreen',
});
 

Navigator 적용하기

Navigator 적용을 위해 작업할 부분은 앱 실행 초기에 로딩될 App.js 클래스입니다.

아래 코드를 적용하고 앱을 실행하면 AppNavigator.js 에 정의된 initialRouteName 이 참조하고 있는 FirstScreen 클래스가 라우팅 될 것 입니다.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import AppNavigator from './AppNavigator'
 
type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <AppNavigator/>
    );
  }
}
 

이제 Navigator에 포함된 각 스크린 클래스를 생성하도록 하겠습니다.

각 스크린 클래스 생성하기

1. FirstScreen.js

FirstScreen은 최상위 네비게이터가 참조하고 있는 화면입니다.

1. static navigationOptions 은 네비게이션에 표시될 옵션을 정의합니다.

2. render() 함수 내의 {navigate}는 각 페이지 전환에 필요한 기능을 제공할 것 입니다.

3. navigate 함수의 파라미터로 사용자 정의 데이터를 넘길 수 있습니다.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
 
type Props = {};
export default class FirstScreen extends Component<Props> {
  static navigationOptions = {
    title: '첫 번째 페이지',
  };
 
  render() {
    const {navigate} = this.props.navigation;
    return (
      <View>
        <Text>First Screen</Text>
        <Button
          title="Go to Second Screen"
          onPress={() => navigate('SecondScreen', {data: 'something'})}
        />
      </View>
    );
  }
}
 

2. SecondScreen.js

FirstScreen의 버튼을 터치하면 이동될 두번째 스크린 입니다.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
 
type Props = {};
export default class SecondScreen extends Component<Props> {
  static navigationOptions = {
    title: '두 번째 페이지',
  };
 
  render() {
    const {navigate} = this.props.navigation;
 
    return (
      <View>
        <Text>Second Screen</Text>
        <Text>{this.props.navigation.getParam('data', 'DEFAULT_VALUE')}</Text>
      </View>
    );
  }
}

결과 확인

완성된 코드를 실행하면 아래와 같이 상단에 Navigation이 표시되는 것을 보실 수 있습니다.

---

강윤구 / 대표

Yungu Kang / CEO

yungu@userinsight.co.kr