如何在 Nativescript Vue 中使用 <ios> 或 <android> 元素答案

【问题标题】：How to use <ios> or <android> elements in Nativescript Vue如何在 Nativescript Vue 中使用 <ios> 或 <android> 元素
【发布时间】：2018-04-29 20:17:39
【问题描述】：

我想这样做

```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>

```

最好的方法是什么？

【问题讨论】：

标签： vue.js nativescript

【解决方案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>

【讨论】：