<div id="readability-page-1" class="page"><div><blockquote>
React Native로 앱을 만드는 과정에서 React Navigation을 사용하는데 많은 어려움이 있었습니다. 일주일 정도를 삽질한 것 같아서 글로 남기기 위해 작성했습니다.
</blockquote>
<h2 id="react-native-app-만들기">React Native App 만들기</h2>
React Navigation을 사용하기 전에 React Native APP 만드는 방법을 간단히 설명하겠습니다.
리액트 네이티브 앱을 만들어줍니다. 저는 프로젝트 명을 Navigation으로 했습니다.
<pre><code>// 프로젝트 생성
$ create-react-native-app Navigation

// 커맨드 라인 도구 설치
$ npm install -g react-native-cli

// 생성된 프로젝트 폴더로 이동
$ cd Navigation

// 시뮬레이터로 react native 실행
$ react-native run-ios</code></pre>
위 코드를 실행한 터미널 캡쳐 이미지 입니다. 
<img src="https://velog.velcdn.com/images/eunjeong/post/5c24b176-c46b-490f-8757-66428320d2fb/image.png"> 
<img src="https://velog.velcdn.com/images/eunjeong/post/a2ce9263-4667-463b-adc3-55098c5c0d05/image.png"> 
<img src="https://velog.velcdn.com/images/eunjeong/post/7251d3d8-390d-4e67-9697-8af067884795/image.png"> 
React Native 프로젝트가 정상적으로 실행되면 아래 이미지와 같은 화면을 시뮬레이터로 확인할 수 있습니다. 
<img src="https://velog.velcdn.com/images/eunjeong/post/c05f40a5-7e83-466f-84c2-d86337f1d91f/image.png">
<hr>
<h2 id="navigation-이동-페이지-만들기">Navigation 이동 페이지 만들기</h2>
Navigation으로 이동하기 위한 페이지들이 필요합니다.
App.js 와 동일한 위치에 HomeScreen.js, CalendarScreen.js, SettingScreen.js를 만들었습니다. 세개의 파일은 아래 코드로 작성되어 있고, .title의 글자만 Home, Calendar, Setting로 다르게 작성했습니다.
<pre><code>import React, {Component} from 'react';
import {
 StyleSheet,
 View,
 Text,
} from 'react-native';

class SettingScreen extends Component {
 render() {
 return (
 &lt;View style={styles.wrap}&gt;
 &lt;Text style={styles.title}&gt;Home&lt;/Text&gt;
 &lt;/View&gt;
 );
 }
}

const styles = StyleSheet.create({
 wrap: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 },
 title:{
 fontSize:30,
 }
 
});

export default SettingScreen;</code></pre>
<h2 id="라이브러리-설치하기">라이브러리 설치하기</h2>
이제 라이브러리를 설치합니다.
<pre><code>$ npm install react-navigation
$ npm install react-native-gesture-handler react-native-reanimated
$ npm install react-navigation-tabs --save</code></pre>
위 코드를 실행한 터미널 캡쳐 이미지 입니다. 
<img src="https://velog.velcdn.com/images/eunjeong/post/d0fc3273-7511-4b08-9561-c9634b119a82/image.png"> 
<img src="https://velog.velcdn.com/images/eunjeong/post/f61e9658-24a1-47de-ba79-241d5b6473f1/image.png"> 
<img src="https://velog.velcdn.com/images/eunjeong/post/7a3a8781-5026-440b-82e7-67ea2361524f/image.png"> 
그 후에 아래 코드를 실행합니다.** (저는 현재 ios로 개발중이라서 아래 코드로 간단하게 작업했습니다.)
<pre><code>$ cd ios
$ pod install
$ cd ..

// react native 다시 실행
$ react-native run-ios</code></pre>
<h2 id="tab-navigation-사용하기">Tab Navigation 사용하기</h2>
설치한 라이브러리를 사용해서 App.js에서 페이지들을 연결합니다. 아래 코드는 App.js의 코드입니다.
상단에 라이브러리를 import 합니다.
<pre><code>import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';</code></pre>
작성한 페이지들을 import 합니다.
<pre><code>import HomeScreen from './HomeScreen';
import CalendarScreen from './CalendarScreen';
import SettingScreen from './SettingScreen';</code></pre>
아래 코드를 참고해서 페이지 연결 부분도 코드도 작성합니다.
<pre><code>import {createAppContainer} from 'react-navigation';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import HomeScreen from './HomeScreen';
import CalendarScreen from './CalendarScreen';
import SettingScreen from './SettingScreen';
import { StyleSheet, Text, View } from 'react-native';
import {createBottomTabNavigator} from 'react-navigation-tabs';


const TabNavigator = createBottomTabNavigator(
 {
 Home: {
 screen: HomeScreen,
 navigationOptions: {
 tabBarLabel: 'Home'
 }
 },
 Calendar: {
 screen: CalendarScreen,
 navigationOptions: {
 tabBarLabel: 'Calendar'
 }
 },
 Setting: {
 screen: SettingScreen,
 navigationOptions: {
 tabBarLabel: 'Setting'
 }
 },
 },
 {
 tabBarOptions: {
 inactiveTintColor: 'grey'
 }
 }
);

export default createAppContainer(TabNavigator);</code></pre>
아래 이미지와 같이 Navigation이 정상동작 하는 것을 확인할 수 있습니다. 
<img src="https://velog.velcdn.com/images/eunjeong/post/40ccf603-15f0-45e2-9b69-6093b537cb35/image.png">
<hr>
<h3 id="참고">참고</h3>
<ul>
<li><a href="https://bangc.tistory.com/13">react-navigation 사용하여 화면 간 이동하기</a></li>
<li><a href="https://medium.com/@jang.wangsu/rn-react-native-%EC%8B%9C%EC%9E%91-3aab881f574f">React-Native 시작하기</a></li>
<li><a href="https://jeffgukang.github.io/react-native-tutorial/docs/router-tutorial/02-react-navigation-tab/react-navigation-tab.html">react-navigation-tab</a></li>
</ul></div></div>

eunjeong.log

React Native로 앱을 만드는 과정에서 React Navigation을 사용하는데 많은 어려움이 있었습니다. 일주일 정도를 삽질한 것 같아서 글로 남기기 위해 작성했습니다.
React Native App 만들기
React Navigation을 사용하기 전에 React Native APP 만드는 방법을 간단히 설명하겠습니다.
리액트 네이티브 앱을 만들어줍니다. 저는 프로젝트 명을 Navigation으로 했습니다.
// 프로젝트 생성
$ create-react-native-app Navigation
// 커맨드 라인 도구 설치
$ npm install -g react-native-cli
// 생성된 프로젝트 폴더로 이동
$ cd Navigation
// 시뮬레이터로 react native 실행
$ react-native run-ios
위 코드를 실행한 터미널 캡쳐 이미지 입니다.
React Native 프로젝트가 정상적으로 실행되면 아래 이미지와 같은 화면을 시뮬레이터로 확인할 수 있습니다.
Navigation 이동 페이지 만들기
Navigation으로 이동하기 위한 페이지들이 필요합니다.
App.js 와 동일한 위치에 HomeScreen.js, CalendarScreen.js, SettingScreen.js를 만들었습니다. 세개의 파일은 아래 코드로 작성되어 있고, .title의 글자만 Home, Calendar, Setting로 다르게 작성했습니다.
import React, {Component} from 'react';
import {
 StyleSheet,
 View,
 Text,
} from 'react-native';
class SettingScreen extends Component {
 render() {
 return (
 <View style={styles.wrap}>
 <Text style={styles.title}>Home</Text>
 </View>
 );
 }
}
const styles = StyleSheet.create({
 wrap: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 },
 title:{
 fontSize:30,
 }
});
export default SettingScreen;
라이브러리 설치하기
이제 라이브러리를 설치합니다.
$ npm install react-navigation
$ npm install react-native-gesture-handler react-native-reanimated
$ npm install react-navigation-tabs --save
위 코드를 실행한 터미널 캡쳐 이미지 입니다.
그 후에 아래 코드를 실행합니다.** (저는 현재 ios로 개발중이라서 아래 코드로 간단하게 작업했습니다.)
$ cd ios
$ pod install
$ cd ..
// react native 다시 실행
$ react-native run-ios
Tab Navigation 사용하기
설치한 라이브러리를 사용해서 App.js에서 페이지들을 연결합니다. 아래 코드는 App.js의 코드입니다.
상단에 라이브러리를 import 합니다.
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
작성한 페이지들을 import 합니다.
import HomeScreen from './HomeScreen';
import CalendarScreen from './CalendarScreen';
import SettingScreen from './SettingScreen';
아래 코드를 참고해서 페이지 연결 부분도 코드도 작성합니다.
import {createAppContainer} from 'react-navigation';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import HomeScreen from './HomeScreen';
import CalendarScreen from './CalendarScreen';
import SettingScreen from './SettingScreen';
import { StyleSheet, Text, View } from 'react-native';
import {createBottomTabNavigator} from 'react-navigation-tabs';
const TabNavigator = createBottomTabNavigator(
 {
 Home: {
 screen: HomeScreen,
 navigationOptions: {
 tabBarLabel: 'Home'
 }
 },
 Calendar: {
 screen: CalendarScreen,
 navigationOptions: {
 tabBarLabel: 'Calendar'
 }
 },
 Setting: {
 screen: SettingScreen,
 navigationOptions: {
 tabBarLabel: 'Setting'
 }
 },
 },
 {
 tabBarOptions: {
 inactiveTintColor: 'grey'
 }
 }
);
export default createAppContainer(TabNavigator);
아래 이미지와 같이 Navigation이 정상동작 하는 것을 확인할 수 있습니다.
참고
react-navigation 사용하여 화면 간 이동하기
React-Native 시작하기
react-navigation-tab

React Native Navigation

댓글