Как использовать <ios>или <android>элементы в Nativescript Vue

Question

Я хотел бы сделать это

`` `XML

  <android>
      <NavigationButton 
                 text="Go Back"
                 android.systemIcon="ic_menu_more"
                 @tap="$refs.drawer.nativeView.showDrawer()"/>
  </android>

  <ios>
     <ActionItem 
            text="Menu" 
            @tap="$refs.drawer.nativeView.showDrawer()" />
  </ios>
</ActionBar>

`` `

Как лучше всего это сделать?

Answer 1

Как опубликовано здесь https://github.com/nativescript-vue/nativescript-vue/issues/180#issuecomment-380844535

Вы можете использовать эти элементы, как вы, но ActionBar немного отличается (следовательно, почему он не работает так, как вы ожидаете). В проекте я добавил

// main.js
import { isAndroid, isIOS } from 'tns-core-modules/platform';
Vue.prototype.$isAndroid = isAndroid;
Vue.prototype.$isIOS = isIOS;

В шаблоне

<ActionBar android.icon="ic_home" class="action-bar" title="Home">
         <NavigationButton 
                     v-if="$isAndroid"
                     text="Go Back"
                     android.systemIcon="ic_menu_more"
                     @tap="$refs.drawer.nativeView.showDrawer()"/>
         <ActionItem 
                v-else
                text="Menu" 
                @tap="$refs.drawer.nativeView.showDrawer()" />
</ActionBar>