[React Native] 탭 레이아웃 구현하기 (React-Navigation)

NPM으로 필요한 라이브러리 설치하기

1. react-navigation(Navigator)

npm install --save react-navigation

2. native-base(UI Component)

npm install --save native-base

Native와 종속성이 있는 라이브러리 연결시키기

react-native link

App.js

import React from 'react';
import { View, StatusBar } from 'react-native';
import Router from "./app/Router";

class App extends React.Component {
    render() {
        return (
            <Router />
        )
    }
}

export default App;

./app/Router.js

import React from 'react';
import { Icon } from 'native-base';
import { TabNavigator } from "react-navigation";

import FirstTabScreen from './FirstTabScreen';
import SecondTabScreen from './SecondTabScreen';
import ThirdTabScreen from './ThirdTabScreen';

const Router = TabNavigator({
    First: {
        screen: FirstTabScreen,
        navigationOptions: {
            tabBarLabel: '첫번째',
            tabBarIcon: ({tintColor}) => (
                <Icon name='ios-alarm-outline' style={{color: tintColor}} />
            )
        }
    },
    Second: {
        screen: SecondTabScreen,
        navigationOptions: {
            tabBarLabel: '두번째',
            tabBarIcon: ({tintColor}) => (
                <Icon name='ios-american-football-outline' style={{color: tintColor}} />
            )
        }
    },
    Third: {
        screen: ThirdTabScreen,
        navigationOptions: {
            tabBarLabel: '세번째',
            tabBarIcon: ({tintColor}) => (
                <Icon name='ios-bonfire-outline' style={{color: tintColor}} />
            )
        }
    }
}, {
    initialRouteName: "First",  // 처음 보여질 탭
    tabBarPosition: 'bottom',   // 탭 위치
    swipeEnabled: true,         // Swipe 기능
    lazy: true,                 // Default 값 true, 활성화 된 탭만 렌더링 할 것인지 여부.
    tabBarOptions: {
        inactiveTintColor: '#b3b3b3',
        activeTintColor: '#000',
        showIcon: true
    }
});

export default Router;

3개의 탭들

// ./app/FirstTabScreen.js
import React from 'react';
import { View, Text } from 'native-base';

export default class FirstTabScreen extends React.Component {
    render() {
        return (
            <View>
                <Text>This Tab is First</Text>
            </View>
        );
    }
}

// ./app/SecondTabScreen.js
import React from 'react';
import { Text } from 'native-base';

export default class SecondTabScreen extends React.Component {
    render() {
        return (
            <View>
                <Text>This Tab is Second</Text>
            </View>
        );
    }
}

import React from 'react';
import { Text } from 'native-base';

// ./app/ThirdTabScreen.js
export default class ThirdTabScreen extends React.Component {
    render() {
        return (
            <View>
                <Text>This Tab is Third</Text>
            </View>
        );
    }
}

결과