[Vue3] NativeScript Bottom Navigation 만들기

환경 : NativeScript Vue3 beta9 + TypeScript 기반

 

본격적인 모바일 하이브리드 베이스 앱을 만들고 있다.

저번에는 Navigation Drawer(Side Menu) 를 만들어 보았으니, 이번에는 하단 탭 구조(BottomNavigation)를 만들어 볼 차례가 되었다.

 

하단 탭 구조는 네이티브 스크립트에서 기본 제공하는 TabView / TabViewItem 등을 이용해서 만들거나, ui-material-component 플러그인, Vuetify 플러그인 등을 이용해서 만들 수 있는데, 이번에는 ui-material-component 플러그인으로 만들어 보도록하겠다.

 

ui-material-component 플러그인으로 선택한 이유는 실제로 되기 때문이다. Vuetify는 아직 제대로 볼 시간이 없어서 적용할 수 없었고, 네이티브 스크립트의 TabView는 실행이 되지 않았다. 아마도 기존 Vue2 로 동작하는 것이 Vue3와 무언가 호환성 이슈가 있는것 같은데, 그런것은 네이티브 스크립트 개발자들이 해결해주리라 믿는다.

 

Vue2 기반 네이티브 스크립트는 그냥 구글링 후 적당히 붙여넣어도 잘되는데, Vue3 기반 네이티브 스크립트는 기본 코딩 자체가 타입스크립트로 변해서 타입 체크와 코딩룰이 엄격해져서 Vue2에서 쓰던 코드들이 호환이 잘 안되어 헤딩을 많이 해야 하는 상황이다. 특히 Vue3 가 컴포지션 API 로 변경되면서 구조가 많이 변해서.... 휴 빡세..

 

참고 : nativescript-community/ui-material-components: Monorepo that contains all of the NativeScript Material Design plugins. (github.com)

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

 

1. 플러그인 설치(터미널 실행)

ns plugin add @nativescript-community/ui-material-bottom-navigation

 

2. app.ts 또는 main.ts 에 플러그인 통합

import { createApp } from 'nativescript-vue';
import Home from './components/Home.vue';
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';

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

 

3. BottomTabNavigation.vue 생성 및 코딩

    순수하게 컨텐츠와 하단 탭 구조 동작이 되는 간단한 코드이다.

    구글링 계속하면서 결국 되는 코드로 만들어 둔 것이니 참고하면 되겠다.

<template>
    <Page>
        <GridLayout rows="*, auto">
            <MDBottomNavigation
                row="0"
                selectedIndex="1"
                :iosCustomPositioning="false"
                backgroundColor="blue"
            >
                <!-- MDTabStrip 으로 하단 네비게이션 바를 생성한다. -->
                <MDTabStrip>
                    <MDTabStripItem>
                        <Label text="First" />
                    </MDTabStripItem>
                    <MDTabStripItem>
                        <Label text="Second" />
                    </MDTabStripItem>
                    <MDTabStripItem>
                        <Label text="Third" />
                    </MDTabStripItem>
                    <MDTabStripItem>
                        <Label text="Fourth" />
                    </MDTabStripItem>
                </MDTabStrip>

                <!-- 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>
                <MDTabContentItem>
                    <Page>
                        <GridLayout backgroundColor="transparent">
                            <Label
                                text="Fourth Page"
                                class="h2 text-center"
                            ></Label>
                            <Button
                                text="show alert"
                                verticalAlignment="center"
                            ></Button>
                        </GridLayout>
                    </Page>
                </MDTabContentItem>
            </MDBottomNavigation>
        </GridLayout>
    </Page>
</template>

<script lang="ts">
export default {};
</script>

 

4. 이제 컨텐츠 화면 작성하고, 각종 커스텀을 하면 앱이 뚝딱 나오겠다.

 

좀 더 이쁜 화면을 위해 Vuetify 기반의 컴포넌트를 통합해볼 예정이다. 사실 화면 외의 기능들은 그냥 적당히 하면 다 될거 같아서.. 눈에 보이는 화면 위주로 베이스 프로젝트를 만들어 둘 예정이다.