1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. 네비게이터 사용하기

네비게이터 사용하기

모바일 앱은 대부분 한 화면만으로 구성되지 않습니다. 앱에 두 번째 화면을 추가하자마자 사용자가 한 화면에서 다른 화면으로 이동하는 방법을 고려해야 합니다.

네비게이터를 사용하여 여러 화면 사이를 전환할 수 있습니다. 이러한 전환은 마스터/디테일 스택 또는 세로 모달 팝업을 통해 일반적인 측면 애니메이션으로 이루어질 수 있습니다.

네비게이터(Navigator)

React Native에는 몇 가지 기본 제공되는 네비게이션 컴포넌트가 있지만 첫 번째 앱에서는 Navigator를 사용하려고 합니다. 네비게이션 스택의 자바스크립트 구현을 제공하므로 iOS와 Android 모두에서 작동하며 쉽게 사용자 지정할 수 있습니다.

장면(Scenes)으로 작업하기

이 시점에서, 여러분은 app에 있는 모든 종류의 컴포넌트들을 쉽게 렌더링 할 수 있을 것입니다. 그것은 텍스트가 있는 간단한 View이거나, 이미지 리스트가 있는 ScrollView일 것입니다. 이러한 컴포넌트들은 여러분의 앱에서 장면(화면에 대한 또 다른 단어)을 구성합니다.

장면은 일반적으로 전체 화면으로 렌더링되는 React 컴포넌트입니다. 이는 텍스트, 이미지 또는 심지어 화면의 일부로 렌더링 될 사용자 정의 SpinningBeachball 컴포넌트와는 대조적입니다. 이 튜토리얼의 앞부분에서 다룬 “HelloWorldApp”, “FlexDirectionBasics”및 “ListViewBasics” 컴포넌트는 모두 장면의 예입니다.

간단히 하기 위해 약간의 텍스트를 표시하는 간단한 장면을 정의해 보겠습니다. 나중에 앱을 탐색할 때 이 장면으로 돌아올 것입니다. 다음 내용으로 “MyScene.js”라는 새 파일을 만듭니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';

export default class MyScene extends Component {
  static get defaultProps() {
    return {
      title: 'MyScene'
    };
  }

  render() {
    return (
      <View>
        <Text>Hi! My name is {this.props.title}.</Text>
      </View>
    )
  }
}

컴포넌트 선언 앞에 “export default” 가 있음을 알 수 있습니다. 이렇게 하면 컴포넌트가 내보내지고 다음과 같이 나중에 다른 컴포넌트가 이 컴포넌트를 가져올(import) 수 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';

import MyScene from './MyScene';

class YoDawgApp extends Component {
  render() {
    return (
      <MyScene />
    )
  }
}

AppRegistry.registerComponent('YoDawgApp', () => YoDawgApp);

이제 장면을 렌더하는 간단한 앱이 만들어 졌습니다. 여기서 MyScene은 재사용 가능한 React 컴포넌트의 간단한 예입니다.

네비게이터(Navigator) 사용하기

장면에 대해 충분히 알았다면, 네비게이팅을 시작하십시오. 먼저 네비게이터를 렌더링한 다음 네비게이터가 자신의 렌더 함수를 renderScene prop으로 전달하여 장면을 렌더링하도록 합니다.

1
2
3
4
5
6
7
8
9
10
render() {
  return (
    <Navigator
      initialRoute={{ title: 'My Initial Scene', index: 0 }}
      renderScene={(route, navigator) => {
        return <MyScene title={route.title} />
      }}
    />
  );
}

네비게이션을 다룰 때 많이 겪게 되는 일은 라우트[route]의 개념입니다. route는 장면에 대한 정보가 들어있는 객체입니다. 네비게이터의 renderScene 함수가 장면을 렌더링하는 데 필요한 모든 컨텍스트를 제공하는 데 사용됩니다. 장면을 구별하는 데 도움이 되는 임의의 수의 키를 가질 수 있으며 위 예제의 경우 단일 title 키를 선택했습니다.

장면을 스택으로 밀어 넣기

새로운 장면으로 전환하려면 push와 pop에 대해 알아야 합니다. 이 두 메소드는 위의 renderScene 함수에 전달된 navigator 객체에 의해 제공됩니다. 그것들은 당신이 깨달았을지도 모르지만, 당신의 네비게이션 스택으로 route를 push 하고 pop 하는 데 사용될 수 있습니다.

1
2
3
4
5
6
navigator.push({
  title: 'Next Scene',
  index: 1,
});

navigator.pop();

route의 push와 pop을 데모하는 완벽한 예입니다. index*.js 파일을 다음과 같이 편집하십시오:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import React, { Component } from 'react';
import { AppRegistry, Navigator } from 'react-native';

import MyScene from './MyScene';

class SimpleNavigationApp extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{ title: 'My Initial Scene', index: 0 }}
        renderScene={(route, navigator) =>
          <MyScene
            title={route.title}

            // 새로운 장면을 표시할 때 호출 할 함수
            onForward={() => {    
              const nextIndex = route.index + 1;
              navigator.push({
                title: 'Scene ' + nextIndex,
                index: nextIndex,
              });
            }}

            // 이전 장면으로 돌아 가기 위해 호출하는 함수
            onBack={() => {
              if (route.index > 0) {
                navigator.pop();
              }
            }}
          />
        }
      />
    )
  }
}

AppRegistry.registerComponent('SimpleNavigationApp', () => SimpleNavigationApp);

MyScene.js는 다음과 일치합니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';

export default class MyScene extends Component {
  render() {
    return (
      <View>
        <Text>Current Scene: {this.props.title}</Text>

        <TouchableHighlight onPress={this.props.onForward}>
          <Text>Tap me to load the next scene</Text>
        </TouchableHighlight>

        <TouchableHighlight onPress={this.props.onBack}>
          <Text>Tap me to go back</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

MyScene.propTypes = {
  title: PropTypes.string.isRequired,
  onForward: PropTypes.func.isRequired,
  onBack: PropTypes.func.isRequired,
};

이 예제에서는 MyScene 컴포넌트에 title prop을 통해 현재 route의 title이 전달됩니다. 이 클래스는 해당하는 prop을 통해 전달된 onForward 및 onBack 함수를 호출하는 두 개의 표시 가능한 컴포넌트를 표시하며, 필요에 따라 navigator.push() 및 navigator.pop()을 호출합니다.

다른 네비게이터 코드 샘플을 보려면 Navigator API 레퍼런스를 확인하거나 네비게이터로 수행할 수 있는 다른 작업의 예를 보기 위해 네비게이션 가이드를 읽으십시오.

하이 파이브!

만약 여러분이 튜토리얼을 읽으면서 여기까지 왔다면, 여러분은 꽤나 인상적인 사람임에 틀림없습니다. 축하합니다. 다음으로는, 커뮤니티가 React Native로 수행하는 모든 유용한 정보를 확인하고 싶을 것입니다.

Was this article helpful to you? Yes No

How can we help?