HybridApp-React Native 2세대 (1-2 MaterialTopTab,Drawer Navigator)

HybridApp-React Native 2세대 (1-1 BottomTabNavigator )를 만든 폴더 작업을 할 것이다.

새로 파일을 만들고 index.js에서 보여주는 문서만 변경하면 된다.

여러 어플을 보면 상단 부분에 탭으로 화면 전환을 하는 것을 봤을 것이다.

상단에 탭메뉴를 만들어보자.

RN12NavigationScreen2폴더에 새로운 파일( TopTabMain.js )을 만들자.

RN12NavigationScreen2 폴더 안에 screens_toptab 폴더를 만들고, 

screens_toptab폴더 안에 First.js, Second.js, Third.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>
        );
    }
}

Second.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>
        );
    }
}

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>
        );
    }
}

TopTabMain.js에서 MaterialTopTabNavigator 3개의 화면을 연결하자.

<실행 화면> - 간단하게 상단에 탭이 생기고 화면 전환이 된다.

TopTab도 마찬가지로 icon을 줄 수 있다.

static이라서 화면 갱신이 되려면 앱 종료 후, 다시 run을 해야 한다.

 

Second, Third 화면은 TopTabMain.js에서 Icon을 추가하자.

<실행 화면> - 상단에 Icon이 추가되었다.

해당 탭을 bottom으로 바꿀 수 있다.

MaterialTopTabNavigator도 마찬가지로 두번째 옵션을 줄 수 있다.

탭의 배경색을 바꾸자.

---

<복붙용 코드>

TopTabMain.js

import React, {Component} from 'react';
import {createAppContainer} from 'react-navigation';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import  Icon  from 'react-native-vector-icons/FontAwesome';
 
import First from './screens_toptab/First';
import Second from './screens_toptab/Second';
import Third from './screens_toptab/Third';
 
import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter';
 
const toptabNav= createMaterialTopTabNavigator(
    {
        First:{screen:First},
        Second:{screen:Second, navigationOptions:{tabBarIcon: ()=><Icon name="search" size={24} color="white"></Icon>}},
        Third:{screen:Third, navigationOptions:{tabBarIcon: ()=><Icon name="music" size={24} color="white"></Icon>}},
    },
    {
        tabBarPosition:'bottom',
        tabBarOptions:{
            showIcon:true,
            activeTintColor: '#00FF00', //선택된 탭 글씨 색상
            inactiveTintColor: "#000000", //선택 안된 탭 글씨 색상
            style:{
                backgroundColor:'#633689',
            },
            indicatorStyle:{ //슬라이드바의 스타일
                borderBottomColor:'#FFFFFF',
                borderBottomWidth: 8,
            },
         
        },
        pagerComponent:ViewPagerAdapter,   
    }
);
 
const AppContatiner= createAppContainer(toptabNav);
 
export default class TopTabMain extends Component{
    render(){
        return <AppContatiner></AppContatiner>
    }
}

First.js

import React,{Component} from 'react';
import {View, Text} from 'react-native';
import  Icon  from 'react-native-vector-icons/FontAwesome';
 
export default class First extends Component{
 
    static navigationOptions={
        tabBarIcon: ()=><Icon name="star" size={24} color="white"></Icon>
    }
    render(){
        return(
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <Text>FIRST TAB</Text>
            </View>
        );
    }
}

---

이제 DrawerNavigator를 이용해보자.

 

 

 

---

<복붙용 코드>

DrawerMain.js

import React, {Component} from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Screen1 from './screens_drawer/Screen1';
import Screen2 from './screens_drawer/Screen2';
import Screen3 from './screens_drawer/Screen3';
import { createAppContainer } from 'react-navigation';
 
const drawerNav= createDrawerNavigator(
    {
        one: {screen: Screen1},
        two: {screen: Screen2},
        three: {screen: Screen3},
    }
);
 
const AppContainer= createAppContainer(drawerNav);
 
export default class DrawerMain extends Component{
    render(){
        return <AppContainer></AppContainer>
    }
}

Screen1.js

import React,{Component} from 'react';
import {View, Text, Button} from 'react-native';
 
export default class Screen1 extends Component{
    render(){
        return(
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <Text>SCREEN #1</Text>
 
                <View style={{margin:8}}>
                    <Button title="open drawer" onPress={this.openDrawer}></Button>
                </View>
 
            </View>
        );
    }//render method
 
    openDrawer=()=>{
        this.props.navigation.openDrawer();
    }
 
}//Screen1 class
 

Screen3.js

import React,{Component} from 'react';
import {View, Text, Button, Image} from 'react-native';
 
export default class Screen3 extends Component{
 
    static navigationOptions={
        drawerLabel: 'Screen #3',
        drawerIcon: ()=><Image source={require('../icons/icon.png')} style={{width:30, height:30, borderRadius:15}}></Image>
    }
 
    render(){
        return(
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <Text>SCREEN #3</Text>
 
                <View style={{margin:8}}>
                    {/* 무조건 첫번째 스크린으로 이동 */}
                    <Button title="Go home" color='indigo' onPress={()=>this.props.navigation.goBack()}></Button>
                </View>
 
            </View>
        );
    }
}