HybridApp-React Native 2세대 (1-1 BottomTabNavigator)

<최종화면>BottomTabNavigator 이용해서 쉽게 화면 전환을 한다.

해당 탭에 icon을 넣고 색상 변경도 해본다.

---

AVD를 실행시키고 작업을 하자.

react-navigation 라이브러리 이용해보자.

명령어:npm install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

BottomTabNavigator를 이용하기 위해 설치하자.

명령어 :npm install react-navigation-tabs

아래 사진을 보면 추가된 것을 알 수 있다.

설치하고 코드 작성 전에 run을 하자.

Main.js를 만들자.

RN12NavigationScreen2폴더에 새로운 폴더( screens_bottom )를 만들고,

하위 파일로 First.js, Second.js, Third.js를 만들자.

screens_bottom 폴더를 만들자.

First.js 파일을 만들자.

First.js

import React,{Component} from 'react';
import {View, Text} from 'react-native';
 
export default class First extends Component{
 
    render(){
        return(
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <Text>FIRST TAB</Text>
            </View>
        );
    }
}

screens_bottom 폴더에 Second.js 파일을 만들자.

Second.js

import React,{Component} from 'react';
import {View, Text} from 'react-native';
 
export default class Second extends Component{
 
    render(){
        return(
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <Text>SECONDTAB</Text>
            </View>
        );
    }
}

 

Third.js

import React,{Component} from 'react';
import {View, Text} from 'react-native';
 
export default class Thirdextends Component{
 
    render(){
        return(
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <Text>THIRDTAB</Text>
            </View>
        );
    }
}

Main.js에서  First, Second, Third를 전환할 수 있게 하자.

Main.js

import React, {Component} from 'react';
import {View} from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import First from './screens_bottom/First';
import Second from './screens_bottom/Second';
import Third from './screens_bottom/Third';
import { createAppContainer } from 'react-navigation';
 
// BottomTabNavigator생성
const bottomNav= createBottomTabNavigator(
    {
        First: {screen:First}, // 첫 번째 First는 별명 두 번째 First는 js문서 이름
        Second: {screen:Second},
        Third: {screen:Third},
    }
);
 
// Navigator를 감싸는 AppContatiner 생성
const AppContatiner= createAppContainer(bottomNav);
 
export default class Main extends Component{
    render(){
        return <AppContatiner></AppContatiner>
    }
}
 

RN12NavigationScreen2 폴더에 icons 폴더를 만들자.

icons 폴더를 만들자.

임의로 3개의 이미지를 추가했다.

First페이지에 이미지를 추가하자.

static으로 선언한 것은 앱을 종료 후, 다시 실행해야 화면에 갱신된다.

인터넷에는 다양한 아이콘을 사용 가능하게 해주는 라이브러리가 있다. 그것을 활용해보자.

react-native 버전이 0.6 이후는 install만 해도 자동으로 link가 된다. 

그러나 아이콘 라이브러리 중에 자동으로 link가 안되는 것도 있다. 아래 사이트는 link까지 해줘야 에러가 안난다.

우선 install을 해주자.

명령어:npm install react-native-vector-icons

link도 해주자. 그후 앱이 정상 동작하는지 실행해보자.

명령어:npx react-native link react-native-vector-icons

우선 적용 전에 run을 해서 오류가 없는지 확인하자.

정상적으로 실행이 된다.

추가된 icon 라이브러리에 관련된 정보를 보자.

여러 테마? 로 구분하여 조금씩 이미지가 다르다. 

아래에서 우리는 FontAwesome에 home을 사용해보겠다.

우선 아이콘을 추가하면 자동으로 import도 된다.

위에 사이트를 보면 아이콘 모양들이 조금씩 다르다. 예제에서는 FontAwesome에서 사용하겠다.

그럴려면 아래와 같이 코드를 수정하자.

이미지의 크기와 색상을 주자. 크기는 style에 width와 height로도 가능하지만, 보통 size로 준다.

static이기 때문에 화면 갱신을 하려면 다시 run을 해야 한다.

아이콘을 Main에서도 추가할 수 있다.

navigationOptions을 줄 수 있다.

원래 createBottomTabNavigator 두가지 옵션을 줄 수 있다.

두번째 옵션을 이용해서 첫 화면을 지정할 수 있다. 이 옵션들은 사이트에서 정보를 찾아보자.

탭의 글자를 없앨 수 있다.

탭의 글자와 아이콘도 없앨 수 있다.

font size 조절도 가능하다.

해당 탭 글자 색상도 지정 가능하다.

해당 탭 백그라운드 색상도 지정 가능하다.

탭의 구분선도 지정 가능하다.

---

<복붙용 코드>

Main.js

import React, {Component} from 'react';
import {View} from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import First from './screens_bottom/First';
import Second from './screens_bottom/Second';
import Third from './screens_bottom/Third';
import { createAppContainer } from 'react-navigation';
import  Icon  from 'react-native-vector-icons/FontAwesome';
 
// BottomTabNavigator생성
const bottomNav= createBottomTabNavigator(
    //RouteConfigs
    {
        First: {screen:First}, // 첫 번째 First는 별명 두 번째 First는 js문서 이름
        Second: {screen:Second},
        Third: {
            screen:Third,
            navigationOptions:{ 
                // tabBarIcon:()=>{return <Icon name="heart" size={24} color='red'></Icon>} 
                tabBarIcon:()=><Icon name="heart" size={24} color='red'></Icon>
            }
        },
    },
    //TabNavigatorConfig
    {
        initialRouteName: 'Second',
        tabBarOptions:{
            showLabel:true,
            showIcon:true,
            labelStyle:{
                fontSize:14,
            },
            style:{
                backgroundColor:'white'
            },
            activeTintColor: 'red',
            activeBackgroundColor:'green',
            tabStyle:{
                borderTopWidth:1,
                borderBottomWidth:1,
                borderLeftWidth:0.5,
                borderRightWidth:0.5,
                borderColor:'black',
                paddingTop:8, //탭사이즈 커지진 않고 안에 내용물이 조금 내려감
            },
        },
    }
);
 
// Navigator를 감싸는 AppContatiner 생성
const AppContatiner= createAppContainer(bottomNav);
 
export default class Main extends Component{
    render(){
        return <AppContatiner></AppContatiner>
    }
}
 

First.js

import React,{Component} from 'react';
import {View, Text, Image} from 'react-native';
 
export default class First extends Component{
 
    // 탭아이콘 지정
    static navigationOptions={
        tabBarIcon: ()=>{return <Image source={require('../icons/emoticon-2.png')} style={{width:24,height:24}}></Image>}
    }
 
    render(){
        return(
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <Text>FIRST TAB</Text>
            </View>
        );
    }
}

Second.js

import React,{Component} from 'react';
import {View, Text} from 'react-native';
import  Icon  from 'react-native-vector-icons/FontAwesome';
 
export default class Second extends Component{
 
    // 탭아이콘 지정
    static navigationOptions={
        tabBarIcon: ()=>{return <Icon name="home" size={24} color='orange'></Icon>}
    }
 
    render(){
        return(
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <Text>SECOND TAB</Text>
            </View>
        );
    }
}

Third.js

import React,{Component} from 'react';
import {View, Text} from 'react-native';
 
export default class Third extends Component{
    render(){
        return(
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <Text>THIED TAB</Text>
            </View>
        );
    }
}