NativeScript标签图标和徽章

Question

我使用带有Angular 2的NativeScript创建的应用程序的代码如下

<TabView>
    <StackLayout *tabItem="{title: '&#xf015; Profile &#xf1e0;" >
   <Label class="fa" text="&#xf015;"></Label>
<Button class="fa" id="button" text="&#xf1e0; Tap me!" ></Button>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf015; Stats">
        <Label text="Second tab item"></Label>
    </StackLayout>

    <StackLayout *tabItem="{title: 'Settings'}">
        <Label text="Third tab item"></Label>
    </StackLayout>
</TabView>

这里是设置tabTitle的图标如下

   <StackLayout *tabItem="{title: '&#xf015; Profile &#xf1e0;" >

我正在使用fontAwesome但是标签设置很简单，没有显示标签标题。也不会显示缺少图标的占位符。

图标会显示标签和按钮。

还有一种方法可以向标签添加徽章，如下图所示

如果有更新，这会很有用。

Answer 1

目前，由于讨论here的原因，* tabItem不支持图标字体。 要解决此问题，请使用 iconSource ，它允许您为标签提供图片。

<StackLayout *tabItem="{title: 'My Title', iconSource:'res://icon'}">

Answer 2

正如@Nick所说，tabItem目前不支持图标字体。我也有像你这样的麻烦我必须实现带有图标和徽章的标签栏。我就是这样做的，我希望它能以某种方式有用，即使它不是很好的练习。

我在GridLayout设置属性DockLayout（假tabBar）中创建了dock="bottom"。在GridLayout内，我制作了一组标签，其文字可以通过图标字体显示。我还添加了一个滑动手势监听器，以便用户可以通过滑动来更改选项卡。这可能是暂时解决问题的想法。