nativescript - 图像按钮Nativescript和Angular

Question

我需要创建一个图像按钮，其中包含自定义图像和{N} + Angular中的标签。
像这样的东西:



这是我的代码。我在网格布局内使用堆栈布局。我看不到图片下方的标签。

<GridLayout columns="*,*" rows="*,*,*,*,*,*"  width="400" height="400">
    <StackLayout class="  btn-sq-lg  " col="0" row="0" (tap)="gotoSRTPage()">
        <Image  col="0" row ="1" src="res://ic_briefcase" > </Image>
        <Label class= "label" textWrap="true" col="0" row="2" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
    </StackLayout>  
    <StackLayout class="  btn-sq-lg  " col="1" row="0" (tap)="">
        <Image  col="1" row ="1" src="res://ic_blog" > </Image>
        <Label  class= "label" col="1" row="2" text="SRT" horizontalAlignment="center" verticalAlignment="center"</Label>
        </StackLayout>    
         <StackLayout class="  btn-sq-lg  " col="0" row="3" (tap)="">
        <Image  col="0" row ="4" src="res://ic_reminder" > </Image>
        <Label class= "label" textWrap="true" col="0" row="5" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
        </StackLayout>    
         <StackLayout class="  btn-sq-lg  " col="1" row="3" (tap)="">
        <Image  col="1" row ="4" src="res://ic_announcement" > </Image>
        <Label class="label" textWrap="true" col="1" row="5" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
        </StackLayout>      
</GridLayout>

CSS文件:

.btn-sq-lg {
 background-color: white;
}
.label {
  text-align: center;
  color:#00caab;
}

Answer 1

到目前为止，我还没有找到一种简单的方法来做到这一点，但是我有一个解决方案

您可以尝试以下

some.component.html

<StackLayout class="btn-img"  orientation="horizontal" padding="5" (tap)="onTappedFun()" >
   <Image src="res://facebook"  width="10%" height="100%" marginRight="10"></Image>
   <Label text="Login via Facebook" verticalAlignment="center"></Label>
</StackLayout>

some.component.css

.btn-img{
    border-radius: 5;
    border-width: 1;
    color: white;
    margin: 10;
    font-size: 22;
    border-color: #2b3c6a;
    background-color: #3B5997;
}

some.component.ts

onTappedFun(){
    console.log("Hey i was tapped");
}

结果