Nativescript footbar with angular2

Question

我对Nativescript UI非常陌生。我怎样才能将footer放在NativeScript中，并使用angular2。

我正在设计带有选项卡的页面。我需要在一个选项卡中显示列表视图和页脚。列表视图工作完美，如下图所示。我的关注点是设计页脚和工厂按钮。我对改变没有太多经验。

代码如下：

<TabView [selectedIndex]="tabindex" selectedColor="#FF0000"> 
<StackLayout *tabItem="{title: 'Appertiser'}" > 
    <Label text="Hello, I am Appertiser" marginTop="20" fontSize="20" horizontalAlignment="center" textAlignment="center"></Label> 
</StackLayout> 
<StackLayout *tabItem="{title: 'Noodles'}" > 
    <ListView [items]="products"> 
     <template let-item="item"> 
      <GridLayout rows="auto" columns="auto,*" class="list-wrapper"> 
       <Image row="0" col="0" [src]="item.productImage" horizontalAlignment="left"></Image> 
       <StackLayout row="0" col="1" orientation="vertical" horizontalAlignment="left" class="productDetail"> 
        <Label [text]='item.productName' horizontalAlignment="left" class="productHeading"></Label> 
        <Label [text]='item.productShortDescription' horizontalAlignment="left" class="productDescription"></Label> 
        <Label [text]='item.productTags' horizontalAlignment="left" class="productTags"></Label> 
       </StackLayout> 
       <Image row="0" col="2" [src]="item.iconImage" width="20px" height="20px" horizontalAlignment="right" verticalAlignment="top" marginRight="10"></Image> 
       <GridLayout row="0" col="3" orientation="vertical" verticalAlignment="bottom"> 
        <Label [text]='item.productPrice' class="productPrice" textColor="red" horizontalAlignment="right" class="productPrice"></Label> 
       </GridLayout> 
      </GridLayout> 
     </template> 

    </ListView> 

    <FAB (tap)="toggleNav('Home')" rippleColor="#f1f1f1" class="fab-button"></FAB> 


</StackLayout> 
<StackLayout *tabItem="{title: 'Seafood'}"> 
    <Label text="Hello, I am Seafood" marginTop="20" fontSize="20" textAlignment="left"></Label> 

    <GridLayout row="1" column="0" rows="auto" columns="50,*,50" verticalAlignment="bottom" backgroundColor="lightgray" cssClass="footer"> 
     <Label text="My cat loves the camera" textWrap="true" col="1" colSpan="2" minHeight="50" fontSize="20" margin="3"></Label> 
     <Label text="John Smith" col="1" row="1" fontSize="14" horizontalAlignment="left" verticalAlignment="bottom" margin="3"></Label> 
     <Label text="comments: 26" col="2" row="1" color="#10C2B0" fontSize="14" verticalAlignment="bottom" margin="3"></Label> 
    </GridLayout> 
    <GridLayout cssClass="footer" row="1" column="0" rows="auto" columns="50,*,50"> 
     <Image src="{{flag}}" cssClass="flagimage" col="0" row="0"></Image> 
     <Label text="{{lang}}" tap="{{goDefault}}" col="1" row="0" textAlignment="left"></Label> 
     <Image src="~/res/icons/white/ellipsis_white.png" cssClass="iconwhitesmall" tap="{{goOther}}" row="0" col="2"></Image> 
    </GridLayout> 

</StackLayout> 

Answer 1

为了熟悉NativeScript +角2我wo8uld建议检查出this sample app其中示出了一些基本场景。

至于你的问题 - 你是什么意思的“页脚”！主页或菜单的语义页脚layout或者footer for list-view controller？答案取决于你的具体需求，所以请分享一下你迄今为止所做的事情以及你正在努力实现的目标。