본문 바로가기

TabViewItem Frame defaultPage 오류

nativescript-vue에서 tabview안의 tabitem안의 <frame defaultPage="페이지"> 가 먹지 않아서 바꾼 과정에 대한 내용이다.


nativescript-vue 이용을 할 때 탭뷰를 사용을 하게 되는데

각 탭 내용이 길면은 별도의 파일로 만들고 싶어진다.


그래서 frame을 사용을 하게 되는데 무엇을 잘못한건지 defaultPage가 먹지 않는다.


0.버전

- tns --version : 6.0.0-2019-06

- tns plugin list

-- tns-core-modules : 5.4.2

-- nativescript-vue : 2.2.0

-- vue-router : 3.0.6

-- vuex : 3.1.1



1.경로

탭뷰페이지 : app--page--page1.vue

탭뷰에 include될 페이지 : app--page--tab1.vue


2.상황

page1에 tabview를 선언을 하고 

tabviewitem에 frame defaultPage를 넣으면 화면에 불러오질 못함.


코드로 보면


01.기존

<TabView>

  <TabViewItem>

     <StackLayout>

         블라 블라 블라

         ~~ 무지무지 김.

     </StackLayout>

  </TabViewItem>

</TabView>


02.변경 : tab1을 불러오지를 못함.

<TabView>

  <TabViewItem>

     <Frame defaultPage="~/page/tab1">

  </TabViewItem>

</TabView>


03.최종 해결 : 결과적으로 defaultPage 옵션은 못 씀

<TabView>

  <TabViewItem>

     <Frame>

         <addComponent />

     </Frame>

  </TabViewItem>

</TabView>


<script>

import addComponent from '~/컴포넌트'

export default {

   componetns : {

       addComponent

   }

}

</script>


addComponent.vue 내용

<template>

  <Page actionBarHidden="true"> <-- 포함이 되는 녀석이기에 액션바가 두개니 없애줌

    랄랄라.

  </Page>

</template>


defaultPage에 넣으면 불러오는 부분이 동작을 하지 않아서 또 몇시간 뒤져가며 시간을 보냈다.


처음에는 파일 경로 문제인줄 알고 이리저리하다가 곧 상관없다는것을 깨달았다.

무엇을 잘못한것인지 버그인지 vue에서는 지원을 안하는지 모르겠다만.


비슷한 문제로 이슈가 있었던거 같다 18.11월 쯤

https://github.com/nativescript-vue/nativescript-vue/issues/381


내용 중에 보면 nativescript-vue 사이트의 frame부분에 추가하는 예제를 만들었다고 한다.



탭안에 프레임을 썻을 때 defaultPage만 동작을 하지 않는 것인지

그냥 아직은 nativescript-vue일 때는 어디서든 defaultPage가 동작을 하지 않는 것인지 


typescript에서는 안 그런것인지 angular에서는 안그런것인지 세세하게 테스트는 안해봤다.


이미 다른걸로 시간을 많이 보냈기 때문에 여유가 없다.


결과적으로 <Frame>안에 다른 컴포넌트나 페이지를 추가하려면 아래와 같이 해야 한다.


<Frame>

   <Page>

    <OtherComponent />

   </Page>

</Frame>


해당 페이지 스크립트에 컴포넌트를 등록 시켜야 한다.

<script>

   import OtherComponent form '~/page/othercomponent'

  export default {

     components: {

         OtherComponent

     }

  }

</script>


nativesciprt의 여러 예제들을 보면 <Frame defaultPage="랄랄라" />

부분이 많이 있어서 그렇게 하면 되는줄 알았다가 많이 헤메게 되었다.


거듭 결과적으로 nativescript-vue에서 <Frame defaultPapge="음">을 쓰지 말고

<Frame>

   <Component />

</Frame>

식으로 쓰자.


해당 내용은 ns-vue.org의 frame페이지 아래쪽에보면 외부 구성요소를 가지는 프레임에 대한 부분이 있다.


개발을 하다보면 물론 nativescript-vue사이트를 가서 볼 때도 있지만 nativescript.org를 가서 볼 때도 있다.


혹은 ns vue 예제가 없는 경우 typescript로 된 코드나 angular로 된 코드 등을 살펴보고 참고 할 때가 많다.


본래의 ns 사이트의 frame란에는 defaultPage에 대한 부분이 있다.


내가 vue를 쓰고 있으면 vue에 있는 내용을 기본으로 알고 진행을 하자.


코드 프로그래밍에 시간이 들어가는 것이 아니라 이러한 부분으로 헤메는 시간은 전체 프로젝트 중에서 무시못하는 시간이니 무조건 절약을 해야 한다.