[Vue3] NativeScript Bottom Navigation 만들기2 (MDBottomNavigationBar + MDTabContent

NativeScript + Vue3 베타를 계속 공부하면서 여러 가지 베이스 프로젝트들을 만들어 보고 있다. 각종 기능이 담긴 나만의 베이스 프로젝트를 만들어두면 나중에도 검색하는 시간을 줄이고 바로바로 복붙으로 가져다 쓸 수 있기 때문에 자신만의 베이스 프로젝트를 만들어 두는 것을 추천한다.
 
이번에는 지난 번에 만들었던 NativeScript BottomNavigation 을 좀 더 업그레이드 된 플러그인으로 교체하여 동작하는 것 까지 해보려고 한다. 사실 지난글 2023.10.05 - [IT/Vue] - [Vue3] NativeScript Bottom Navigation 만들기  에서는 아주 기본적인 BottomNavigation 플러그인으로 만들었기 때문에 약간 볼품(??)없는 형태여서 마음에 계속 안들었는데 이번에는 조금 더 안드로이드/iOS 네이티브로 제공하는 BottomNavigation 처럼 보여지는 플러그인으로 적용해보겠다.
 
아 그리고 지난글에서 오류가 있는데 현재 NativeScript 와 Vuetify 는 서로 호환되지 않고 있으니 참고 바란다.
 
소스 자체는 지난 번에 쓴 것과 거의 동일하다.
 
MDBottomNavigationBar 플러그인 추가

// BottomNavigationBar 플러그인 추가
tns plugin add nativescript-bottom-navigation

// BottomNavigation 플러그인 추가
ns plugin add @nativescript-community/ui-material-bottom-navigation

 
MDBottomNavigationBar 사용을 위한 app.ts(main.ts) 내용

import { createApp } from 'nativescript-vue';
import Home from './components/Home.vue';
// BottomNavigationBar 메뉴 
import BottomNavigationBar from '@nativescript-community/ui-material-bottomnavigationbar/vue';
// BottomNavigation Content 관련
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';

createApp(Home)
.use(DrawerPlugin)
.use(BottomNavigationBar)
.use(BottomNavigation)
.start();

 
BottomNavigationBar.vue 파일 내용

<template>
    <Page>
        <ActionBar>
            <NavigationButton text="Back" @tap="$navigateBack" />
            <Label text="BottomNavigationBar" />
        </ActionBar>
        <GridLayout rows="*, auto">
            <MDBottomNavigation
                row="0"
                // currentTab 값이 동적으로 변할 때마다 ContentItem 을 바꾼다
                :selectedIndex="currentTab"
                backgroundColor="blue"
            >
                <!-- MDTabContentItem 으로 하다 네비게이션 버튼에 따른 컨텐츠 화면을 생성한다. -->
                <MDTabContentItem>
                    <Page backgroundColor="transparent">
                        <GridLayout backgroundColor="transparent">
                            <Label
                                text="First Page"
                                class="h2 text-center"
                            ></Label>
                            <Button
                                text="show alert"
                                verticalAlignment="center"
                            ></Button>
                        </GridLayout>
                    </Page>
                </MDTabContentItem>
                <MDTabContentItem>
                    <GridLayout backgroundColor="transparent">
                        <Label
                            text="Second Page"
                            class="h2 text-center"
                        ></Label>
                    </GridLayout>
                </MDTabContentItem>
                <MDTabContentItem>
                    <GridLayout backgroundColor="yellow">
                        <Label text="Third Page" class="h2 text-center"></Label>
                    </GridLayout>
                </MDTabContentItem>
            </MDBottomNavigation>

			<!-- MDBottomNavigationBar 으로 하단 네비게이션 바를 생성한다. -->
            <MDBottomNavigationBar
                activeColor="blue"
                inactiveColor="black"
                backgroundColor="white"
                @tabPressed="onBottomNavigationTabPressed"
                @tabSelected="onBottomNavigationTabSelected"
                @tabReselected="onBottomNavigationTabReselected"
                row="1"
            >
            	<!-- 타이틀 아이콘 등은 적절히 커스텀하면 된다. -->
                <MDBottomNavigationTab
                    title="Home"
                    icon="~/icons/home.png"
                />
                <MDBottomNavigationTab
                    title="Details"
                    icon="~/icons/details.png"
                />
                <MDBottomNavigationTab
                    title="BasicDrawer"
                    icon="~/icons/drawer.png"
                />
            </MDBottomNavigationBar>
        </GridLayout>
    </Page>
</template>

<script lang="ts">
import * as frameModule from "@nativescript/core/ui/frame";
import {
    TabPressedEventData,
    TabReselectedEventData,
    TabSelectedEventData,
} from "@nativescript-community/ui-material-bottomnavigationbar";
import { ref, $navigateBack} from "nativescript-vue";

export const title = "BottomNavigationBar sample";

export default {
    setup() {
    	// ref로 선언해서 동적 데이터 값을 감지할 수 있도록 한다 초기값은 0
        const currentTab = ref(0);

        const onNavigationButtonTap = () => {
            frameModule.Frame.topmost().goBack();
        };
        const onBottomNavigationTabPressed = (args: TabPressedEventData) => {
            console.log(`pressed tab index:  ${args.index}`);
        };
        const onBottomNavigationTabSelected = (args: TabSelectedEventData) => {
            console.log(`old tab index:  ${args.oldIndex}`);
            console.log(`selected tab index:  ${args.newIndex}`);
            // BottomNavigationBar 를 누를때 마다 현재 인덱스 값이 반환되어 온다.
            currentTab.value = args.newIndex;
        };
        const onBottomNavigationTabReselected = (
            args: TabReselectedEventData
        ) => {
            console.log(`pressed tab index:  ${args.index}`);
        };

        return {
            onNavigationButtonTap,
            onBottomNavigationTabPressed,
            onBottomNavigationTabSelected,
            onBottomNavigationTabReselected,
            currentTab,
        };
    },
};
</script>

 
소스와 주석만 읽어도 충분히 이해하고 적용할 수 있을 것으로 보인다.
 
궁금한게 있으시면 댓글 달아주세요, 저도 잘 모르지만 함께 고민해보시죠.
 
결과물

 

 

참고 : 단 아래의 예제대로 하면 동작하지 않음.;;;

https://market.nativescript.org/plugins/nativescript-bottom-navigation/

nativescript-bottom-navigation | NativeScript Marketplace

https://github.com/nativescript-community/ui-material-components/tree/master

GitHub - nativescript-community/ui-material-components: Monorepo that contains all of the NativeScript Material Design plugins.