[React Native] Tab navigation 사용하기 (2019년 기준)

React 목록

react-navigation 설치하기

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

 

xCode는 react-native-gesture-hadler를 manual 설정해야 합니다.

xCode에서 Libraries에서 마우스 오른쪽 클릭 > Add Files to <Project Name>

/node_modules/react-native-gesture-handler/ios/RNGestureHandler.xcodeproj 선택하고 Add합니다.

 

프로젝트를 선택하고 Build Phases > Link Binary With Libraries (+) 아이콘을 클릭합니다.

 

libRNGestureHandler.a를 선택하고 Add 버튼을 누릅니다.

 

화면코딩

App.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

const data = new Array(30).fill(0);

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 30 }}>Home Screen</Text>
            </View>
        );
    }
}

class SettingsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 30 }}>Settings Screen</Text>
            </View>
        );
    }
}

const TabNavigator = createBottomTabNavigator({
    Home: { screen: HomeScreen },
    Settings: { screen: SettingsScreen },
});

export default createAppContainer(TabNavigator);

 

iOS Build

$ react-native run-ios

 

Android Build

$ react-native run-android

 

 

 

 

 

 

 

 

React 목록