RN) 화면전환_BottomTabNavigator _MaterialTopTabs

소정·2023년 6월 2일

ReactNative

목록 보기

11/17

[1] BottomTabNavigator

메인 화면

import React from "react";
import {Image, StyleSheet} from "react-native";

// 1. NavigationContainer 임포트
import { NavigationContainer } from "@react-navigation/native";


// 2. BottomTabNavigator 만드러내는 기능함수 import
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";


// 4. 타입스크립일 땐 리스트 만들어야함 BottomTabNavigator에 등록할 스크린 컴포넌트 리스트 타입 지정
export type BottomTabScreenList = {
    First : undefined,   //화면이름 : 전달데이터 타입
    Second : undefined,
    Third : undefined,
}

// 3. BottomTabNavigator 객체 생성
const BottomTab = createBottomTabNavigator<BottomTabScreenList>() //5. 제네릭으로 지정

//Tab으로 보여줄 화면 screen 컴포넌트 3개 import
import FirstTab from "./screen_bottomtab/FirstTab";
import SecondTab from "./screen_bottomtab/SecondTab";
import ThirdTab from "./screen_bottomtab/ThirdTab";

export default function Main():JSX.Element {
    return (
        <NavigationContainer>
            <BottomTab.Navigator
                initialRouteName="Second"
                screenOptions={{
                    tabBarActiveTintColor : '#fff',
                    tabBarInactiveTintColor : 'grey',
                    tabBarActiveBackgroundColor : 'pink',
                    tabBarShowLabel : true, //글씨 안보이게 보이게 하는 것
                    tabBarLabelPosition : "below-icon"

                }}
            >
                {/* 6. 화면 연동 */}
                <BottomTab.Screen 
                    name="First" 
                    component={FirstTab}
                    options={{
                        tabBarLabel : "여행", // 탭 글씨 바꾸기
                        tabBarIcon : ()=>{return <Image style={style.icon} source={require('./image/travel.png')}></Image>},
                        tabBarBadge: 'new',
                        tabBarActiveTintColor:'red',
                    }}
                    ></BottomTab.Screen> 
                <BottomTab.Screen 
                    name="Second" 
                    component={SecondTab}
                    ></BottomTab.Screen> 
                <BottomTab.Screen 
                    name="Third" 
                    component={ThirdTab}
                    options={{
                        tabBarLabel : "호텔", // 탭 글씨 바꾸기
                        tabBarIcon : ()=> <Image style={style.icon} source={require('./image/bed.png')}></Image>,
                    }}
                    ></BottomTab.Screen> 
            </BottomTab.Navigator>
        </NavigationContainer>
    )
}

//스타일
const style = StyleSheet.create({

    root: {
        flex : 1,
        padding : 16,
        justifyContent : "center",
        alignItems : "center",
    },
    text : {
        padding:8,
        color : 'black'
    },
    icon : {
        width : 25,
        height : 25
    }

})

탭 화면

탭1

import React from "react";
import {View, Text, Button, StyleSheet} from 'react-native'


//네비게이터의 스크린은 props 객체를 전달받음 - 그 타입지정
import {BottomTabScreenProps } from '@react-navigation/bottom-tabs'

//이 스크린이 메인에서 보여주는 화면 중 하나라고 지정
import { BottomTabScreenList } from "../Main";

//props 타입 만들기
type FirstProps = BottomTabScreenProps<BottomTabScreenList, "First"> //위에 임포트한 두가지로 props 지정

export default function FirstTab(props:FirstProps) { //props 가 가지고 있는 두가지 {navigator , route}

    return (
        <View style={style.root}>
            <Text style={style.text}>첫번째!!</Text>
        </View>
    )

}

//스타일
const style = StyleSheet.create({

    root: {
        flex : 1,
        padding : 16,
        justifyContent : "center",
        alignItems : "center",
    },
    text : {
        padding:8,
        color : 'black'
    }

})

탭2

import React from "react";
import {View, Text, Image, Button, StyleSheet} from 'react-native'


//네비게이터의 스크린은 props 객체를 전달받음 - 그 타입지정
import {BottomTabScreenProps } from '@react-navigation/bottom-tabs'

//이 스크린이 메인에서 보여주는 화면 중 하나라고 지정
import { BottomTabScreenList } from "../Main";

//props 타입 만들기
type SecondProps = BottomTabScreenProps<BottomTabScreenList, "Second"> //위에 임포트한 두가지로 props 지정

export default function SecondTab(props:SecondProps) { //props 가 가지고 있는 두가지 {navigator , route}

    //개별 컴포넌트 안에서 탭바와 관련된 옵션 설정 가능
    props.navigation.setOptions({
        tabBarLabel : "여가", // 탭 글씨 바꾸기
        tabBarIcon : () => <Image style={style.icon} source={require('../image/beach.png')}></Image>,
        tabBarBadge : '3',
    })

    return (
        <View style={style.root}>
            <Text style={style.text}>Second</Text>
        </View>
    )

}

//스타일
const style = StyleSheet.create({

    root: {
        flex : 1,
        padding : 16,
        justifyContent : "center",
        alignItems : "center",
    },
    text : {
        padding:8,
        color : 'black'
    },
    icon : {
        width : 25,
        height : 25,
    }
})

탭3

import React from "react";
import {View, Text, Button, StyleSheet} from 'react-native'


//네비게이터의 스크린은 props 객체를 전달받음 - 그 타입지정
import {BottomTabScreenProps } from '@react-navigation/bottom-tabs'

//이 스크린이 메인에서 보여주는 화면 중 하나라고 지정
import { BottomTabScreenList } from "../Main";

//props 타입 만들기
type ThirdProps = BottomTabScreenProps<BottomTabScreenList, "Third"> //위에 임포트한 두가지로 props 지정

export default function ThirdTab(props:ThirdProps) { //props 가 가지고 있는 두가지 {navigator , route}

    return (
        <View style={style.root}>
            <Text style={style.text}>Third</Text>
        </View>
    )

}

//스타일
const style = StyleSheet.create({

    root: {
        flex : 1,
        padding : 16,
        justifyContent : "center",
        alignItems : "center",
    },
    text : {
        padding:8,
        color : 'black'
    }

})

[2] MaterialTopTabs

메인 화면

import React from "react";
import { StyleSheet, Image } from "react-native";

//1. 네비게이션 임포트
import { NavigationContainer } from "@react-navigation/native";

//2. MaterialTop 임포트
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";


//4. 등록할 스크린 리스트 정하기 (타입스크립이기 때문)
export type TopTabScreenList = {
    one : undefined,
    two : undefined,
    three : undefined
}

//3. 탑탭 객체 만들기 리스트로 제네릭과 함께
const TopTab = createMaterialTopTabNavigator<TopTabScreenList>()

//5. 텝에 보여줄 스크린 제작 및 import
import FirstTab from "./sceen_metrial_top_tab/FirstTab";
import SecondTab from "./sceen_metrial_top_tab/SecondTab";
import ThirdTab from "./sceen_metrial_top_tab/ThirdTab";

export default function MainMaterialTopTab() {

    return (
        <NavigationContainer>
            <TopTab.Navigator
                tabBarPosition="top" //탭 위치
                screenOptions={{
                    swipeEnabled : true, // 뷰페이저 기능 켜기 끄기
                    tabBarActiveTintColor : 'violet',
                    tabBarInactiveTintColor : 'grey',
                    tabBarIndicatorStyle : {
                        backgroundColor:'violet',
                        height : 4,
                    },
                    tabBarShowIcon : true,
                }}
            >
                <TopTab.Screen name="one" component={FirstTab}></TopTab.Screen>
                <TopTab.Screen 
                    name="two" 
                    component={SecondTab}
                    options={{
                        tabBarLabel : '하이',
                        tabBarShowLabel : false,
                        tabBarIcon : () => <Image style={{width:25, height:25}} source={require('./image/travel.png')}></Image>
                    }}
                    ></TopTab.Screen>
                <TopTab.Screen name="three" component={ThirdTab}></TopTab.Screen>
            </TopTab.Navigator>
        </NavigationContainer>
    )

}

탭 화면

탭1

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs'
import { TopTabScreenList } from '../MainMaterialTopTab'
type FirstProps= MaterialTopTabScreenProps<TopTabScreenList,"one">

export default function FirstTab(props:FirstProps):JSX.Element{
    return (
        <View style={style.root}>
            <Text style={style.text}>TAB#1</Text>
        </View>
    )
}

const style= StyleSheet.create({
    root:{flex:1, justifyContent:'center', alignItems:'center'},
    text:{padding:8, color:'black', fontWeight:'bold'},
})

탭2

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs'
import { TopTabScreenList } from '../MainMaterialTopTab'
type SecondProps= MaterialTopTabScreenProps<TopTabScreenList,"two">

export default function SecondTab(props:SecondProps):JSX.Element{
    return (
        <View style={style.root}>
            <Text style={style.text}>TAB#2</Text>
        </View>
    )
}

const style= StyleSheet.create({
    root:{flex:1, justifyContent:'center', alignItems:'center'},
    text:{padding:8, color:'black', fontWeight:'bold'},
})

탭3

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs'
import { TopTabScreenList } from '../MainMaterialTopTab'
type ThirdProps= MaterialTopTabScreenProps<TopTabScreenList,"three">

export default function ThirdTab(props:ThirdProps):JSX.Element{
    return (
        <View style={style.root}>
            <Text style={style.text}>TAB#3</Text>
        </View>
    )
}

const style= StyleSheet.create({
    root:{flex:1, justifyContent:'center', alignItems:'center'},
    text:{padding:8, color:'black', fontWeight:'bold'},
})