React Native 에서 Navigation 사용하기

React Native 공부중에 navigation 내용은 정리 해둘까 싶어서 작성합니다.

네비게이션 테스트 환경

---

빌드

expo

패키지 매니저

npm

yarn

사용할 네비게이션 라이브러리

react-navigation

Navigation 이란

---

 거의 대부분의 모바일 앱은 단일 화면으로 구성되지 않습니다. 

대체로 모바일 앱 여러개의 화면을 가지고 있기때문에 이러한 화면의 전환을 위해서는 이를 위한 라이브러리가 필요합니다.

사용자가 직접 구현하기 까다롭기 때문에 이를 위해 여러 회사에서 화면 전환을 위한 라이브러리를 만들었는데 오늘은 그 중 react-navigation을 사용해볼 것입니다.

react-navigation 사용하기

프로젝트 생성

일단 react native 프로젝트를 새로하나 생성 하겠습니다. 

명령창에서 프로젝트를 생성하기 원하는 폴더로 이동 후 expo를 활용하여 프로젝트를 생성합니다. 

명령어는 다음과 같습니다.

expo init react-navigation-test

* react-navigation-test는 제가 임의로 정한 프로젝트 명입니다.

다음과 같은 화면이 나타나면 가장 기본인 blank로 프로젝트를 생성 하겠습니다.

프로젝트의 이름을 정해줍니다.

설치 되어 있는 패키지 매니저 중 yarn으로 설치 하겠냐는 질문입니다. npm혹은 다른 버전의 yarn 이 보이더라도 Y를 입력하여 설치를 진행해 줍니다.

설치가 완료되고 나면 프로젝트의 구성은 보통 위와 같아 집니다. 

react-navigation 설치

이제 react-navigation을 설치하기 위한 라이브러리를 설치해 보겠습니다. 

처음은 react-navigation을 설치합니다.

명령창에 npm을 이용해 설치해 줍니다. 명령어는 다음과 같습니다.

npm install --save react-navigation

다음으로 네이티브 제스쳐 핸들러를 설치 합니다.

yarn add react-native-gesture-handler

마지막으로,  react-navigation-stack를 설치해 줍니다.

yarn add react-navigation-stack

이제 필요한 라이브러리의 설치는 완료되었습니다.

화면 구성

일단 최대한 간략하게 구성하기 위해 App.js 파일에 모든 코드를 넣겠습니다. 

나중에 실제로 사용하실땐 상황에 맞게 코드를 구성해서 사용해주시면 될것 같습니다. 

App.js의 전체 코드는 다음과 같습니다.

import React from "react";

import {Text, Button} from "react-native";

import {createAppContainer} from "react-navigation";

import {createStackNavigator} from "react-navigation-stack";

//HomeScreen 화면

class HomeScreen extends React.Component {

  static navigationOptions = {

    title: "Welcome"

  };

  render() {

    const {navigate} = this.props.navigation;

    return (

      <Button

        title="Go to Test"

        onPress={() => navigate("Test", {name: "Test"})}

      />

    );

  }

}

// TestScreen 화면

class TestScreen extends React.Component {

  static navigationOptions = {

    title: "Test"

  };

  render() {

    const {navigate} = this.props.navigation;

    return <Text>Test screen</Text>;

  }

}

const MainNavigator = createStackNavigator({

  Home: {screen: HomeScreen},

  Test: {screen: TestScreen}

});

const App = createAppContainer(MainNavigator);

export default App;

코드를 간략적으로 설명해보면 

import {createAppContainer} from "react-navigation";

import {createStackNavigator} from "react-navigation-stack";

설치한 라이브러리중 사용하는 라이브러리를 import 합니다.

const MainNavigator = createStackNavigator({

  Home: {screen: HomeScreen},

  Test: {screen: TestScreen}

});

이 코드의 경우 네비게이터를 생성하는 객체를 생성하는 것으로 내부에 name : 으로 화면의 이름을 지정해 주고 

{screen: screen name}으로 해당 이름이 어떤 화면인지 정해줍니다. 

또한 제일 위에 라인에 있는 화면인 Home 이 디폴트 화면이 됩니다.

//HomeScreen 화면

class HomeScreen extends React.Component {

  static navigationOptions = {

    title: "Welcome"

  };

  render() {

    const {navigate} = this.props.navigation;

    return (

      <Button

        title="Go to Test"

        onPress={() => navigate("Test", {name: "Test"})}

      />

    );

  }

}

HomeScreen 화면은 두 화면 중 메인 화면으로 버튼으로 TestScreen 화면으로 넘어 갈수 있습니다. 

상단의 navigationOptions 의 title 같은 경우 네비게이션 바에 표출될 이름을 정해주는 곳입니다. 

다음으로 navigate 객체의 경우 실질적인 navigation 기눙을 사용할 수 있게 해주는 객체입니다.

Button의 onPress에서 동작을 위한 함수로 사용되며 첫번째 매개변수로 이동할 화면의 명을 정해주면 됩니다.

완성된 화면은 다음과같이 구성되며 GO TO TEST 라고 되어있는 파란 버튼을 통해 이동 가능합니다. 

이 외에 더 세세한 기능들도 있지만 가장 기본적인 내용만 정리하고 필요한 경우 세부 용도 추가하도록 하겠습니다.